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上有一个复选框，用户单击该选项并且类会触发您的事件？在活动内部，你可以使用＆＃34;这个＆＃34;用于引用所点击项目的关键字。

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')});

Javascript滚动选择与收藏夹按钮

1 个答案: