javascript - 如何替换 JavaScript 中同一 H1 元素中的变量值？

Question

在我的网页中，我有一个下拉选择，每次选择列表中的项目时，它都会成为该列表的第一个子项。从那里，创建一个 H1 元素，其中第一个子元素(存储在变量“drink”中)被添加到 H1 元素，读取“drink.text()？伟大的选择”。但是，当用户想要更改其选择、更改列表的第一个子项时，我想更改同一原始 H1 中的变量“drink”。

代码:

console.clear();

var el = {};

$('.placeholder').on('click', function(ev) {
  $('.placeholder').css('opacity', '0');
  $('.list__ul').toggle();
});

$('.list__ul a').on('click', function(ev) {
  ev.preventDefault();
  var index = $(this).parent().index();

  $('.placeholder').text($(this).text()).css('opacity', '1');

  console.log($('.list__ul').find('li').eq(index).html());

  $('.list__ul').find('li').eq(index).prependTo('.list__ul');
  $('.list__ul').toggle();


  var drink = $('.list__ul li:first-child');

  var h = document.createElement("H1");
  h.classList.add("dranks");
  var t = document.createTextNode(drink.text() + '? Great Choice.');
  h.appendChild(t);
  document.body.appendChild(h);

  $(".dranks").html(drink.text() + '? Great Choice.');


});


$('select').on('change', function(e) {

  // Set text on placeholder hidden element
  $('.placeholder').text(this.value);
  // Animate select width as placeholder
  $(this).animate({
    width: $('.placeholder').width() + 'px'
  });

});

.typo,
.list a {
  font-size: 55px;
  font-weight: 700;
  font-family: 'Source Sans Pro', sans-serif;
  color: #202530;
  text-decoration: none;
  letter-spacing: 0em;
  text-transform: lowercase;
}

.typo option,
.list a option {
  font-size: 55px;
}

.transition {
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.wrapper {
  padding-top: 150px;
  height: 100vh;
  font-size: 55px;
}

.list {
  display: inline-block;
  position: relative;
  margin-left: 6px;
}

.list ul {
  text-align: left;
  position: absolute;
  padding: 0;
  top: 0;
  left: 0;
  display: none;
  letter-spacing: 0.05em;
}

.list ul .active {
  display: block;
}

.list li {
  list-style: none;
  padding-top: 3px;
}

.list li:first-child a {
  color: #e5b78e;
}

.list a {
  -webkit-transition: all .4s;
  transition: all .4s;
  color: #e5b78e;
  position: relative;
}

.list a:after {
  position: absolute;
  content: '';
  height: 5px;
  width: 0;
  left: 0;
  background: #dea26e;
  bottom: 0;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.list a:hover {
  cursor: pointer;
  color: #dea26e;
}

.list a:hover:after {
  width: 100%;
}

select {
  display: inline;
  border: 0;
  width: auto;
  margin-left: 10px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-bottom: 2px solid #555;
  color: #e5b78e;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

select:hover {
  cursor: pointer;
}

select option {
  border: 0;
  border-bottom: 1px solid #e5b78e;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.placeholder {
  border-bottom: 4px solid;
  cursor: pointer;
  letter-spacing: 0em;
  color: #202530;
}

.placeholder:hover {
  color: #e5b78e;
}

.dranks {
  position: absolute;
  z-index: 2;
  font-family: arial;
  font-weight: bold;
  font-size: 50px;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper typo">today i'm feeling like a
  <div class="list"><span class="placeholder">select</span>
    <ul class="list__ul">
      <li><a href="">Flat White</a></li>
      <li><a href="">Long Black</a></li>
      <li><a href="">Cappuccino</a></li>
      <li><a href="">Mochaccino</a></li>
    </ul>
  </div>
</div>

正如你从我的尝试中看到的，我已经设法做到了这一点，但我觉得这绝对不是正确的方法。任何有关解决方案的帮助将不胜感激。

Answer 1

检查H1是否已存在，如果不存在则创建。

console.clear();

var el = {};

$('.placeholder').on('click', function(ev) {
  $('.placeholder').css('opacity', '0');
  $('.list__ul').toggle();
});

$('.list__ul a').on('click', function(ev) {
  ev.preventDefault();
  var index = $(this).parent().index();

  $('.placeholder').text($(this).text()).css('opacity', '1');

  console.log($('.list__ul').find('li').eq(index).html());

  $('.list__ul').find('li').eq(index).prependTo('.list__ul');
  $('.list__ul').toggle();


  var drink = $('.list__ul li:first-child');

  var h = $("h1.dranks");
  if (h.length == 0) {
    h = $("<h1>", {
      "class": "dranks"
      }).appendTo($('body'));
  }
  h.text(drink.text() + '? Great Choice.');


});


$('select').on('change', function(e) {

  // Set text on placeholder hidden element
  $('.placeholder').text(this.value);
  // Animate select width as placeholder
  $(this).animate({
    width: $('.placeholder').width() + 'px'
  });

});

.typo,
.list a {
  font-size: 55px;
  font-weight: 700;
  font-family: 'Source Sans Pro', sans-serif;
  color: #202530;
  text-decoration: none;
  letter-spacing: 0em;
  text-transform: lowercase;
}

.typo option,
.list a option {
  font-size: 55px;
}

.transition {
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.wrapper {
  padding-top: 150px;
  height: 100vh;
  font-size: 55px;
}

.list {
  display: inline-block;
  position: relative;
  margin-left: 6px;
}

.list ul {
  text-align: left;
  position: absolute;
  padding: 0;
  top: 0;
  left: 0;
  display: none;
  letter-spacing: 0.05em;
}

.list ul .active {
  display: block;
}

.list li {
  list-style: none;
  padding-top: 3px;
}

.list li:first-child a {
  color: #e5b78e;
}

.list a {
  -webkit-transition: all .4s;
  transition: all .4s;
  color: #e5b78e;
  position: relative;
}

.list a:after {
  position: absolute;
  content: '';
  height: 5px;
  width: 0;
  left: 0;
  background: #dea26e;
  bottom: 0;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.list a:hover {
  cursor: pointer;
  color: #dea26e;
}

.list a:hover:after {
  width: 100%;
}

select {
  display: inline;
  border: 0;
  width: auto;
  margin-left: 10px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-bottom: 2px solid #555;
  color: #e5b78e;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

select:hover {
  cursor: pointer;
}

select option {
  border: 0;
  border-bottom: 1px solid #e5b78e;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.placeholder {
  border-bottom: 4px solid;
  cursor: pointer;
  letter-spacing: 0em;
  color: #202530;
}

.placeholder:hover {
  color: #e5b78e;
}

.dranks {
  position: absolute;
  z-index: 2;
  font-family: arial;
  font-weight: bold;
  font-size: 50px;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper typo">today i'm feeling like a
  <div class="list"><span class="placeholder">select</span>
    <ul class="list__ul">
      <li><a href="">Flat White</a></li>
      <li><a href="">Long Black</a></li>
      <li><a href="">Cappuccino</a></li>
      <li><a href="">Mochaccino</a></li>
    </ul>
  </div>
</div>