Javascript 有什么方法可以组合这些脚本吗？_Javascript_Jquery_Html

Javascript 有什么方法可以组合这些脚本吗？

javascript jquery html

Javascript 有什么方法可以组合这些脚本吗？,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试学习jQuery，但我不知道如何使一个div独立于其他div向下滑动，而不为每个div生成单独的脚本。每当我尝试将其生成一个脚本时，div都会同时执行相同的幻灯片 <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <script> $(docume

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


$（文档）.ready（函数（）{
$（“#翻转”）。单击（函数（）{
$（“面板”）。滑动切换（“慢速”）；
});
});
$（文档）.ready（函数（）{
$（“#flip1”）。单击（函数（）{
$（“面板1”）。切换（“慢速”）；
});
});
$（文档）.ready（函数（）{
$（“#flip2”）。单击（函数（）{
$（“#pane2”）。切换（“慢速”）；
});
});
#面板#翻转{
填充物：5px；
文本对齐：居中；
背景色：#e5eecc；
边框：实心1px#c3c3；
}
#面板{
填充：50px；
}
单击以向上滑动面板
你好，世界！
单击以向上滑动面板
你好，世界！
单击以向上滑动面板
你好，世界！

谢谢您的帮助。

尝试在回调函数中使用

this

值。首先，将您的

id=“flip#”

更改为

class=“flip”

，将

id=“panel#”

更改为

class=“panel”

。然后：

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

这将获取单击的元素的

下一个

同级，然后将其向上滑动。

尝试在回调中使用

此

值。首先，将您的

id=“flip#”

更改为

class=“flip”

，将

id=“panel#”

更改为

class=“panel”

。然后：

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

这将获取单击元素的

下一个同级，然后将其向上滑动。
要精简代码，请使用类而不是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>

演示：
要精简代码，请使用类而不是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>

演示：
是的，可以完成。以最简单的方式，您可以删除多个document.ready
&将所有代码放在一个document.ready
中
除此之外，您还可以创建单个类并添加属性数据项
&传递要向上滑动的div的id
在内部，单击函数使用$（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>

单击向上滑动面板
你好，世界！
单击以向上滑动面板
你好，世界！
单击以向上滑动面板
你好，世界！

是的，可以做到。以最简单的方式，您可以删除多个document.ready
&将所有代码放在一个document.ready
中
除此之外，您还可以创建单个类并添加属性数据项
&传递要向上滑动的div的id
在内部，单击函数使用$（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>

单击向上滑动面板
你好，世界！
单击以向上滑动面板
你好，世界！
单击以向上滑动面板
你好，世界！

花点时间读一读
我的回答实际上只是对以下内容的更新：
html:
这很酷，因为这些都可以工作：
<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>

单击向上滑动面板
你好，世界！
你好，世界！
单击以向上滑动面板
你好，世界！
你好，世界！
你好，世界！
花点时间阅读
我的回答实际上只是对以下内容的更新：
html:
这很酷，因为这些都可以工作：
<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>

单击向上滑动面板
你好，世界！
你好，世界！
单击以向上滑动面板
你好，世界！
你好，世界！
你好，世界！
使用slideToggle（）抱歉误解。我抄错代码了。不过谢谢你。使用类名而不是ID的使用DaniP的解决方案，除了使用slideToggle（）代替slideUp（'slow'）；我强烈推荐阅读。请使用slideToggle（）抱歉误解。我抄错代码了。不过谢谢你。使用类名而不是ID的使用DaniP的解决方案，除了使用slideToggle（）代替slideUp（'slow'）；我强烈建议您阅读。如果您确实想保留您的ID属性，请点击（函数（）{
这是一个很好的解决方案。非常感谢！这是一个脆弱的代码，如果dom更改，javascript无法正常工作。@ErikPhilips那么我该如何修复它？@JF看看。如果你绝对想保留ID属性，那么$（“#flip，#flip1，#flip2”）。单击（函数（）{
这是一个很好的解决方案。非常感谢！这是脆弱的代码，如果dom更改，javascript无法正常工作。@ErikPhilips那么我该如何修复它？@JF看一下。我个人的看法是，它应该命名为数据目标，而不是在硬编码的值前面加上前缀，目标是n输入完整选择器，例如数据目标=“#pane2”
。这意味着您可以重用它来关闭多个项目，如果您以类而不是Id为目标。同意您的意见。这是一种更好的方法哦，使用.data（）
而不是attr（）
，jquery已经有了一种简单的读取方法。我个人的看法是，它不应该被命名为数据项
，而应该被命名为数据目标
，并且目标包含完整的选择器，例如数据目标=“#pane2”
。这意味着，如果你以一个数据项为目标，你可以重用它来关闭多个项目类而不是Id。同意您的意见。这是一种更好的方法哦，使用.data（）
而不是attr（）
，jquery已经有了一种简单的读取方法。这是脆弱的代码，如果dom发生变化，javascript将无法正常工作。@ErikPhilips您将如何编写它来解释dom的变化？看看。@ErikPhilips啊，我想我明白您的意思了。您指的是$（This）。next（）？是的。我假设它总是按照这个顺序。这是脆弱的代码，如果dom更改，javascript无法正常工作。@ErikPhilips如何编写它来解释dom更改？看看。@ErikPhilips啊，我想我明白你的意思了。你指的是$（This）。next（）？是的。我是