Question

我正在尝试学习jQuery，但我无法弄清楚如何使一个div与其他div分开滑动，而不为每个div创建单独的脚本。每当我尝试将其制作成一个脚本时，div就会同时执行相同的幻灯片。

<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>

<script>
$(document).ready(function(){
  $("#flip1").click(function(){
    $("#panel1").Toggle("slow");
  });
});
</script>

<script>
$(document).ready(function(){
  $("#flip2").click(function(){
    $("#pane2").Toggle("slow");
  });
});
</script>

<style>
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
 padding: 50px;
}
</style>
</head>

<body>

<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>


<div id="flip1">Click to slide up panel</div>
<div id="panel1">Hello world!</div>


<div id="flip2">Click to slide up panel</div>
<div id="pane2">Hello world!</div>

</body>

感谢您的帮助。

Answer 1

尝试使用回调中的this值。首先，将您的id="flip#"更改为class="flip"，将id="panel#"更改为class="panel"。然后：

$(document).ready(function(){
  $(".flip").click(function(){
    $(this).next('.panel').slideUp("slow");
  });
});

这将获取点击元素的next兄弟，然后向上滑动。

Answer 2

是的，可以做到。最简单的方法是删除多个document.ready＆amp;将所有代码放在一个document.ready内。

除此之外，您还可以创建一个类并添加属性data-item＆amp;传递你想要滑动的div的id。

在click函数内部使用$(this)指向jquery对象。

希望此代码段有用

<强> JS

$(document).ready(function() {
    $(".clickItem").click(function() {
        var getItem =$(this).attr('data-item')
      $("#"+getItem).slideUp("slow");
    });
  });

<强> HTML

<div id="flip"  class="clickItem" data-item="panel">Click to slide up panel</div>
<div id="panel">Hello world!</div>
<div id="flip1"  class="clickItem" data-item="panel1">Click to slide up panel</div>
<div id="panel1">Hello world!</div>
<div id="flip2"class="clickItem" data-item="pane2" >Click to slide up panel</div>
<div id="pane2">Hello world!</div>

DEMO

Answer 3

要减少代码，请使用类而不是ID，如下所示：

<div class="flip">Click to slide up panel</div>
<div class="panel">Hello world!</div>

<div class="flip">Click to slide up panel</div>
<div class="panel">Hello world!</div>

然后，在您的脚本（一个脚本）中，只需在使用hide()加载页面时隐藏所有面板，并监听要单击的.flip类。如果是，请在slideToggle()元素上启动next()。

$(".panel").hide();

$(".flip").click(function() {

  $(this).next().slideToggle();

});

DEMO：http://jsbin.com/yupobomuje/edit?html,js,output

Answer 4

请花一点时间阅读Decoupling Your HTML, CSS, and JavaScript - Philip Walton

我的答案实际上只是对user2181397's answer的更新：

HTML：

<div id="flip" class="js-slide-up" data-target="#panel">Click to slide up panel</div>
<div id="panel">Hello world!</div>
<div id="flip1" class="js-slide-up" data-target="#panel1">Click to slide up panel</div>
<div id="panel1">Hello world!</div>
<div id="flip2" class="js-slide-up" data-target="#pane2" >Click to slide up     panel</div>
<div id="pane2">Hello world!</div>

jQuery的：

$(document).ready(function() {
  $(".js-slide-up").click(function() {
    var selector = $(this).data('target')
    $(selector).slideUp("slow");
  });
});

这很酷，因为这些都有效：

<div class="js-slide-up" data-target="#panel,#panel1">Click to slide up panel</div>
<div id="panel">Hello world!</div>
<div id="panel1">Hello world!</div>

<div class="js-slide-up" data-target=".panel">Click to slide up panel</div>
<div class="panel">Hello world!</div>
<div class="panel">Hello world!</div>
<div class="panel">Hello world!</div>

有没有办法组合这些脚本？

4 个答案: