Question

我想在页面上使用所有H2，H3或H4标题，并使用它们创建一个<select>框，其中每个选项都是页面标题。这应该包括价值。我想最终使用选择框来触发事件;每当有人选择一个标题时，每个标题后的相应标题将fadeIn()，任何可见的段落将fadeOut()。

例如，假设页面如下所示：

<select></select>

<h4>Some title 1</h4>
<p>Paragraph that followstitle 1</p>

<h4>Some title 2</h4>
<p>Paragraph that followstitle 2</p>

变成：

<select>
    <option value="Some title 1">Some title 1</option>
    <option value="Some title 2">Some title 2</option>
</select>

<h4>Some title 1</h4>
<p>Paragraph that followstitle 1</p>

<h4>Some title 2</h4>
<p>Paragraph that followstitle 2</p>

我正在使用jQuery 1.4.2，遗憾的是无法改变它。

Answer 1

遍历每个h4标记并为每个标记创建一个选项：

$('h4').each(function() {
  $('select').append('<option value="' + $(this).text() + '">' + $(this).text() + '</option>');
});

Answer 2

document.querySelector生成与CSS选择器匹配的元素列表。我们首先使用它来找到我们要添加<select>的{{1}}元素，然后使用<option>查找我们为其添加选项的所有标题。在我们创建每个.querySelectorAll()之后，我们会复制原始标题中的<option>属性。

.textContent

每个var selector = document.querySelector('select'); var titles = document.querySelectorAll('h2, h3, h4'); for (var i = 0; i < titles.length; i++) { var titleOption = document.createElement('option'); titleOption.textContent = titles[i].textContent; titleOption.value = titles[i].id; selector.appendChild(titleOption); }的{{1}}属性设置为标题所来自的标题元素的ID。只要您的标题都有ID，就可以在选中时轻松跳转到它们：

value

尝试in this fiddle。

Answer 3

这会添加选项，使用jQuery构建它们而不是字符串，并附加一个更改事件处理程序，它将淡出H4标记之后的任何可见段落，除了select中选择的值之一，它将被淡化在：

$('select').append(function() {
    return $.map($('h4'), function(h4) { return $('<option />', {text: $(h4).text()}) });
}).change(function() {
    var p = $('h4:contains('+this.value+')').next('p');
    $('h4 + p').not(p).fadeOut();
    p.fadeIn();
}).trigger('change');

FIDDLE

Answer 4

这有点接近......

<select id="myselect"></select>

<h4 class="clazz" id="h41">Some title 1</h4>
<p>Paragraph that followstitle 1</p>

<h4 class="clazz" id="h42">Some title 2</h4>
<p>Paragraph that followstitle 2</p>


<script type="text/javascript">
$(function(){
var select = document.getElementById("myselect");

$("H4").each(function(){
    var option = document.createElement("option");
    option.text = $(this).text();
    option.value = this.id;
    select.appendChild(option);
});

$(select).on("change", function(){
    $("H4.clazz").next("p").fadeOut();
    $("H4.clazz").fadeOut();
    var id = this.value;
    $("#" + id).next("p").fadeIn();
    $("#" + id).fadeIn();
}).change();
});
</script>

DEMO

剩下的就是让你看起来很好。

使用jQuery，如何使用页面的H4标题作为选项创建选择列表？

4 个答案: