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>

SCRIPT

$('#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

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

1 个答案: