Javascript滚动选择最喜欢的按钮

Question

我需要为标准选择中的每个选项添加一个可以打开和关闭的收藏夹按钮。我正在使用 Bootstrap 来设置选择的样式。具体来说，我需要创建一个 UI 元素，允许我滚动选项并在我滚动到新元素时处理事件。我想扩展它以在每个选项的左侧包含一个切换按钮，这样我就可以将一个选项标记为“收藏夹”。

HTML

<form>   
  <select id="scrollbox" multiple class="form-control target">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
      <option>Option 5</option>
  </select>  
</form>

<div id="other">
  Trigger the handler
</div>

JavaScript

$( ".target" ).change(function() {
  var e = document.getElementById("scrollbox");   
  document.getElementById("other").innerHTML = e.value;
});

如何为每个选项添加一个可以打开和关闭的收藏夹按钮？我对模拟这种行为的替代工具持开放态度。

Answer 1

也许你的意思是这样的？在 div 上有一个复选框，用户可以在其中单击该选项并且类会触发您的事件？在事件内部，您可以使用“this”关键字来引用被点击的元素。

jsfiddle demo

HTML

 <form>   
      <div id="scrollbox" class="" sytle="display: block">
          <div id="1">Option 1 <input type='checkbox' class='handleFavorite'>Favorite</div>
          <div id="2">Option 2 <input type='checkbox' class='handleFavorite'>Favorite</div>
          <div id="3">Option 3 <input type='checkbox' class='handleFavorite'>Favorite</div>
          <div id="4">Option 4 <input type='checkbox' class='handleFavorite'>Favorite</div>
          <div id="5">Option 5 <input type='checkbox' class='handleFavorite'>Favorite</div>
      </div>  
    </form>

JS

$(".handleFavorite").click(function(){ alert('you clicked me')});