有没有办法把这些脚本结合起来

Is there any way to combine these scripts?

本文关键字：脚本 结合 起来 有没有      更新时间：2023-09-26

我正在尝试学习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>

谢谢你的帮助。

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

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

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

可以做到。以最简单的方式，您可以删除多个document.ready &把所有的代码放在一个document.ready中。

除此之外，您可以创建单个类并添加属性data-item &传递想要向上滑动的div的id。

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

希望这段代码对你有帮助

JS 

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


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

为了精简代码，使用类代替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类被单击。如果是，在next()元素上初始化slideToggle()。

$(".panel").hide();
$(".flip").click(function() {
  $(this).next().slideToggle();
});

演示:http://jsbin.com/yupobomuje/edit?html, js、输出

花点时间阅读解耦你的HTML, CSS和JavaScript - Philip Walton

我的答案实际上只是更新了user2181397的答案:

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>
相关文章：