Question

我希望#conceptTwo div的行为与#conceptOne div的行为相同，同时使用各自的按钮但功能相同。有人可以提出合并变量的最佳方法吗？

＆＃13;

$(document).ready(function() {
  $(".btn1").click(function() {
    $("#conceptOne").slideUp();
  });
  $(".btn2").click(function() {
    $("#conceptOne").slideDown();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is concept one</p>
<div id="conceptOne" style="border-style: solid; border-width: 5px;">
  Concept Content
</div>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

<p>This is concept two</p>
<div id="conceptTwo" style="border-style: solid; border-width: 5px;">
  Concept Content
</div>
<button class="btn3">Slide up</button>
<button class="btn4">Slide down</button>

＆＃13;

Answer 1

尝试使用prev功能 https://api.jquery.com/prev/

我还没有对它进行过测试，但应该采用类似的方法：

$(".btn1").click(function(){
    $(this).prev("div").slideUp();
});

Answer 2

我会让它相对于div，这样你就不必指定每个按钮和div

＆＃13;

$(document).ready(function() {
  $(".su").click(function() {
    $(this).prev().slideUp();
  });
  $(".sd").click(function() {
    $(this).prev().prev().slideDown();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is concept one</p>
<div id="conceptOne" style="border-style: solid; border-width: 5px;">
  Concept Content
</div>
<button class="su">Slide up</button>
<button class="sd">Slide down</button>

<p>This is concept two</p>
<div id="conceptTwo" style="border-style: solid; border-width: 5px;">
  Concept Content
</div>
<button class="su">Slide up</button>
<button class="sd">Slide down</button>

＆＃13;

Answer 3

试试这个：

＆＃13;

$(document).ready(function() {
    
    $(".btn1").on("click",function(){
        $(this).prevAll("#conceptOne,#conceptTwo").eq(0).slideUp(500);
        
    })
    
    $(".btn2").on("click",function(){
        $(this).prevAll("#conceptOne,#conceptTwo").eq(0).slideDown(500);
    })
    
    
})

＆＃13;

<p>This is concept one</p>
        <div id="conceptOne" style="border-style: solid; border-width: 5px;">
            Concept Content
        </div>
        <button class="btn1">Slide up</button>
        <button class="btn2">Slide down</button>

        <p>This is concept two</p>
        <div id="conceptTwo" style="border-style: solid; border-width: 5px;">
            Concept Content
        </div>
        <button class="btn1">Slide up</button>
        <button class="btn2">Slide down</button>
        
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

Answer 4

IMO，您应该只使用一个按钮slideToggle()

正如您所说，您希望各个按钮单击但功能相同，我建议使用单个按钮并为DIV提供相应的选择器。

slideToggle()

的官方文件

有关详细信息，请参阅示例。

$(document).ready(function() {
  $(".slide1").click(function() {
    $('#'+$(this).attr('class')).slideToggle();
  });
  $(".slide2").click(function() {
    $('#'+$(this).attr('class')).slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is concept one</p>
<div id="slide1" style="border-style: solid; border-width: 5px;">
  Concept Content
</div>
<button class="slide1">Slide Toggle</button>

<p>This is concept two</p>
<div id="slide2" style="border-style: solid; border-width: 5px;">
  Concept Content
</div>
<button class="slide2">Slide Toggle</button>

Answer 5

您是否尝试过编写函数？

$(document).ready(function() {

function slideIt(x){

x.slideToggle();

}


  $(".btn1, .btn2").click(function() {

var conceptOne = $("#conceptOne");

slideIt(conceptOne);
});

  $(".btn3, .btn4").click(function() {

var conceptTwo = $("#conceptTwo");

slideIt(conceptTwo);
});

Answer 6

可能有许多不同的解决方案。我的相当简单，基本上依赖于包含每个概念＆＃39;并且＆＃39; up＆＃39;并且＆＃39; down＆＃39;单独<div>'s中的按钮：

<!-- …  -->
    <div id="zone1">    
        <div  id="concept1" style="border-style: solid; border-width: 5px;">
          Concept Content
        </div>
        <button class="btn1">Slide up</button>
        <button class="btn2">Slide down</button>       
    </div>

    <div id="zone2"> 
        <p>This is concept two</p>
        <div id="concept2" style="border-style: solid; border-width: 5px;">
          Concept Content
        </div>
        <button class="btn1">Slide up</button>
        <button class="btn2">Slide down</button>
    </div>

    <script>
      $(".btn1").click(function() { $("div", this.parentNode).slideUp(); });
      $(".btn2").click(function() { $("div", this.parentNode).slideDown(); });
    </script>     
</body>
</html>

优点

a）关于DOM的结构，您只需要为每个概念添加一个<div>，但更重要的是，这将使您能够轻松地格式化每个＆＃39; ;概念＆＃39;具有丰富的功能;

b）方法（slideUp / Down）将有效地应用于DOM-adressing jQuery包装器非常具体。 this.parentNode被称为＆＃39; context＆＃39;选择器。

c）您的JS代码应该在页面的de </body>标记之前附加。您无需致电$(document).ready ...

d）尽管如此，根据良好的编码实践，你应该从你的html页面驱逐你的JS代码。

e）关于造型，与d）相同。

功能相同的不同元素

6 个答案: