javascript - jquery 选择多个并显示到特定容器

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this question

美好的一天!我在 jQuery 多选方面遇到问题。例如:我有 5 个链接 和 3 个容器。每次按下特定链接时，它都会显示到容器中，我想选择 3 个链接 放入 3 个容器。由于我有 5 个链接，因此当我想单击其余链接时，容器将根据按下的链接更改值。

HTML 代码:

<a id="link1">Link 1</a>
<a id="link2">Link 2</a>
<a id="link3">Link 3</a>
<a id="link4">Link 4</a>
<a id="link5">Link 5</a>

<ul id="container">
  <li id="container1>Container 1<li>
  <li id="container2>Container 2<li>
  <li id="container3>Container 1<li>
</ul>

脚本

$('#container1, #container2, #container3').hide();
$('#link1').click(function () {
  $('#container1').show();
});
$('#link2').click(function () {
  $('#container2').show();
});
$('#link3').click(function () {
  $('#container3').show();
});

请帮助我，我对 jQuery 还是个新手。我会感谢你的帮助。提前致谢。

Answer 1

我创建了一个简单的演示

演示唯一要做的是，如果用户单击链接然后它将进入容器然后单击的链接将被隐藏到链接选择。

<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>
<a href="#" class="link">Link 4</a>
<a href="#" class="link">Link 5</a>

<ul id="container">
  <li class="linklist" data-contain = "false" id="container1">Stuff in 1</li>
  <li class="linklist" data-contain = "false" id="container2">Stuff in 2</li>
  <li class="linklist" data-contain = "false" id="container3">Stuff in 3</li>
</ul>

JavaScript::

<script>


$(document).ready(function(){

  // hope you are getting the idea

  // bind event on class link
  $(document).on('click', '.link', function () {

    var link = $(this);
    // get link name
    var link_name = link.text();


    // select container
    var con = $(".linklist[data-contain=false]").first();
      // change the attribute
      con.attr('data-contain', true);
      // change the html contain
      con.html(link_name);
      // show
      con.show();
      // hide the click link
      link.hide();

      // you can do more.. like create a option that
      // you can also delete the selected link on the container
      // list and show the link again to be selected

  });

});


</script>

DEMO HERE