如何使用 <ul> 列表而不是 <select> 下拉菜单将图像添加到每个选项？

Question

我从这段代码开始

function OnChange(value) {
  var sum = 0;
  var x = document.getElementById("first").value;
  var y = document.getElementById("second").value;
  var z = document.getElementById("third").value;
  sum = parseInt(x) + parseInt(y) + parseInt(z);
  document.getElementById('sum').innerHTML = sum;
}

<select id="first" onchange='OnChange(this.value)'>
  <option value="0">Choose...</option>
  {% for firstDigit in firstDigits %}
  <option value="{{ firstDigit.value }}">
    {{ firstDigit.name }}
  </option>
  {% endfor %}
</select>
<select id="second" onchange='OnChange(this.value)'>
  <option value="0">Choose...</option>
  {% for secondDigit in secondDigits %}
  <option value="{{ secondDigit.value }}">
    {{ secondDigit.name }}
  </option>
  {% endfor %}
</select>
<select id="third" onchange='OnChange(this.value)'>
  <option value="0">Choose...</option>
  {% for thirdDigit in thirdDigits %}
  <option value="{{ thirdDigit.value }}">
    {{ thirdDigit.name }}
  </option>
  {% endfor %}
</select>

并为我的更改找到了这个How can I use <ul> list instead of <select> dropdown for the languages switcher?，但我有总和这让我很难做到。我为每个选择选项点击功能做了。

first.click(function (event){});
second.click(function (event){});
third.click(function (event){});

Answer 1

花了几个小时后，我只需要每次选择不同的值时修复这个问题，总和会随着新值的增加而增加。如何保持首先选择并替换新值。我对 firstDigit 的意思是我为 secondDigit 20 选择 10，但是当我将 firstDigit 更改为 20 时，总和是 50，这不正确应该是 40。

const firstNav = $('#firsNav');
const firstSelection = $('.firstDigit');
const firstValue = firstSelection.find('li');

const secondNav = $('#secondNav');
const secondSelection = $('.secondDigit');
const secondValue = secondSelection.find('li')
var sum = 0;
firstNav.click(function(event) {
  if (firstNav.hasClass('active')) {
    firstNav.removeClass('active');
    selection.stop().slideUp(200);
  } else {
    firstNav.addClass('active');
    selection.stop().slideDown(200);
  }
  event.preventDefault();
});

secondNav.click(function(event) {
  if (secondNav.hasClass('active')) {
    secondNav.removeClass('active');
    secondSelection.stop().slideUp(200);
  } else {
    secondNav.addClass('active');
    secondSelection.stop().slideDown(200);
  }
  event.preventDefault();
});

firstValue.click(function() {
  firstValue.removeClass('active');
  $(this).addClass('active');
  var x = $(this).attr('data-value');
  sum = parseInt(x);
  document.getElementById('total').innerHTML = sum;
});

firstValue.click(function() {
  firstValue.removeClass('active');
  $(this).addClass('active');
  var z = $(this).attr('data-value');
  sum = parseInt(z);
  document.getElementById('total').innerHTML = sum;
})

document.getElementById('total').innerHTML = sum;

/*ExteriorFin*/

ol.firstDigit {
  display: none;
}

ol.firstDigit>li {
  width: 200px;
  background: #eee;
  line-height: 25px;
  font-size: 14px;
  padding: 0 10px;
  cursor: pointer;
}

ol.firstDigit>li:hover {
  background: #aaa;
}


/*InteriorWallFin*/

ol.secondDigit {
  display: none;
}

ol.secondDigit>li {
  width: 200px;
  background: #eee;
  line-height: 25px;
  font-size: 14px;
  padding: 0 10px;
  cursor: pointer;
}

ol.secondDigit>li:hover {
  background: #aaa;
}

<h2 id="firsNav">Choose</h2>
<ol class="firstDigit">
  <li data-value="10"> 10 </li>
  <li data-value="20"> 20 </li>
</ol>
<h2 id="secondNav">Choose</h2>
<ol class="secondDigit">
  <li data-value="10"> 10 </li>
  <li data-value="20"> 20 </li>
</ol>
<a id="total" style="font-size: large;font-weight: bold;color: #0a0a0a"></a>

Answer 2

解决

 const updateTotal = function(){
        let total = 0;

        $("ol > li[data-value].active").each(function(){
            const value = parseInt(this.getAttribute("data-value"));
            if (!isNaN(value)) { total += value; }
        });

        $("#total").html(total);
        document.getElementById('eu').innerHTML = "eu";
    };

    $(document).on("click", "ol > li[data-value]", function(){
        const me = $(this);
        me.closest("ol").find("li").removeClass("active");
        me.addClass("active");
        updateTotal();
    });