Question

我有一个包含十五个部分的网页。我希望能够单击每个部分的标题，并按照各自的标题切换“p”元素的可见性。使用此jQuery代码将其可见性设置为在页面开始时“隐藏”：

$(function(){
    $("p").hide();
}

我目前正在使用十五个单独的事件处理程序来切换元素的可见性，每个元素都有自己的ID：

$(function(){$("#show1").click(function(){
    $("#hidden1").toggle(400)});
});
$(function(){$("#show2").click(function(){
    $("#hidden2").toggle(400)});
});

等。到“＃show15”。我想知道是否有更有效的方法来做到这一点。我的代码目前输出我实现目标所需的内容，但是以字符串形式输出。我希望能够执行由“for”循环生成的结果字符串。

var mySection = "";
var myString = "";
var SECT_MAX = 15;

for (var sectNum = 1; sectNum <= SECT_MAX; sectNum++) {
myString = "    $(function(){$(\"#show" + sectNum + "\").click(function(){\n           $(\"#hidden" + sectNum + "\").toggle(400)});\n    });\n";
mySection += myString;
};

// Display the code we have concatenated
console.log(mySection)

如何将字符串传递给jQuery函数，以便使每个标记可单击以切换其各自“p”段落的可见性？

Answer 1

您可以为每个标头添加一个公共类，并在其上附加一个单击处理程序。处理程序只需toggle next()元素：

$('.header').on('click',function(){
  $(this).next().toggle('slow');
});

.header+p{
  display: none;
}

.header{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="header">Header 1</h3>
<p>Text</p>
<h3 class="header">Header 2</h3>
<p>Text</p>
<h3 class="header">Header 3</h3>
<p>Text</p>
<h3 class="header">Header 4</h3>
<p>Text</p>
<h3 class="header">Header 5</h3>
<p>Text</p>
<h3 class="header">Header 6</h3>
<p>Text</p>

Answer 2

当然，有一种更有效的方法可以做到这一点，那就是遵循“不要重复自己”的方法。

为此，您可以在h3和兄弟p元素上使用公共类，并使用DOM遍历方法在单击标题时将两者相关联，如下所示：

$('.heading').click(function() {
  $(this).next('.para').toggle(400);
});

.heading {
  margin: 0;
  padding: 10px 0 3px;
}
.para {
  display: none;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3 class="heading">Title #1</h3>
<p class="para">Lorem ipsum</p>

<h3 class="heading">Title #2</h3>
<p class="para">Lorem ipsum</p>

<h3 class="heading">Title #3</h3>
<p class="para">Lorem ipsum</p>

jQuery单击以隐藏<h3>标记下方的段落

2 个答案: