Question

我需要一些建议，目前我有多个Div来显示该项目的更多细节。

例如

<div id="item-1">Testestesttestetstests<a href="#" id="showmore1">Show More</a></div>
<div id="item-1-more" style="display:none">Contents Contents Contents</div>

<div id="item-2">Testestesttestetstests<a href="#" id="showmore2">Show More</a></div>
<div id="item-2-more" style="display:none">Contents Contents Contents</div>

<div id="item-3">Testestesttestetstests<a href="#" id="showmore3">Show More</a></div>
<div id="item-3-more" style="display:none">Contents Contents Contents</div>

和Javascript

<script>
$(document).ready(function(){
        $("#showmore1").click(function(){
            $("#item-1-more").slideToggle("fast");
        });
});
</script>

所以我的计划是使用if else语句或直接实现控制何时单击每个按钮以显示每个Div的不同内容。例如

<script>
$(document).ready(function(){
    $("#showmore1").click(function(){
        $("#item-1-more").slideToggle("fast");
    });
    $("#showmore2").click(function(){
        $("#item-2-more").slideToggle("fast");
    });
    $("#showmore3").click(function(){
        $("#item-3-more").slideToggle("fast");
    });
});
</script>

我不确定这是否是实施它的好方法，或者我如何以其他方式实现它并且效率更高？

是的，每个Div都有不同的内容。

Answer 1

更短的代码可以是

$('.show-more').on('click', function(){
    $(this).next().slideToggle('fast');
});

为此，您必须在每个显示更多按钮/链接中添加CSS类.show-more。

Answer 2

你可以通过给HTML元素公共类而不是单个id来使这更通用，然后只有一个单击处理程序绑定到指定类的锚 - 在处理程序中，使用DOM导航/遍历方法到达相关内容div：

＆＃13;

$("a.showmore").click(function(e) {
  e.preventDefault();
  $(this).parent().next().slideToggle("fast");
});

＆＃13;

.morehidden { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Testestesttestetstests<a href="#" class="showmore">Show More</a></div>
<div class="morehidden">Contents Contents Contents</div>

<div>Testestesttestetstests<a href="#" class="showmore">Show More</a></div>
<div class="morehidden">Contents Contents Contents</div>

<div>Testestesttestetstests<a href="#" class="showmore">Show More</a></div>
<div class="morehidden">Contents Contents Contents</div>

＆＃13;

所以我特别做的是删除所有元素ID，而不需要它们。我已将showmore类添加到链接中。我已经在内容div中添加了morehidden类，默认情况下将它们设置为display:none（这比在每个内容中编码style="display:none"更整洁）。

在点击处理程序中，this将引用单击的单个项目，因此$(this).parent()获取作为链接父项的div，然后.next()获取关联内容div。

Answer 3

您可以使用解决方案https://jsfiddle.net/tesfpw3z/

＆＃13;

$('a').click(function(e){
  e.preventDefault();
  $(this).closest('tr').next().find('td').slideToggle("fast");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="item-1">Testestesttestetstests<a href="#" id="showmore1">Show More</a></td>
  </tr>
  <tr>
    <td id="item-1-more" style="display:none">Contents Contents Contents</td>
  </tr>

  <tr>
    <td id="item-2">Testestesttestetstests<a href="#" id="showmore2">Show More</a></td>
  </tr>
  <tr>
    <td id="item-2-more" style="display:none">Contents Contents Contents</td>
  </tr>

  <tr>
    <td id="item-3">Testestesttestetstests<a href="#" id="showmore3">Show More</a></td>
  </tr>
  <tr>
    <td id="item-3-more" style="display:none">Contents Contents Contents</td>
  </tr>
</table>

＆＃13;

希望这会对你有所帮助。

多个Div，每个Div有一个按钮切换显示/隐藏Div

3 个答案: