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

jquery select multiple and display to specific container

本文关键字：显示 选择 jquery      更新时间：2023-09-26

您好！我对jQuery多选有问题。例如：我有5个链接和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的新手。我会感谢你的帮助。提前谢谢。

我创建了一个简单的演示

演示的唯一作用是，如果用户点击链接然后它将转到容器，然后单击的链接将隐藏链接选择。

<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>

此处演示

相关文章：