0

我想获取页面上的所有 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 并且无法更改它。

4

4 回答 4

2

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

$('h4').each(function() {
  $('select').append('<option value="' + $(this).text() + '">' + $(this).text() + '</option>');
});
于 2013-07-09T23:21:01.957 回答
2

document.querySelector生成与 CSS 选择器匹配的元素列表。我们将首先使用它来定位<select>我们要添加<option>s 的元素，然后使用它.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);
}

valueeach的属性<option>设置为标题所在的标题元素的 ID。只要您的标题都有 ID，这可以让您在选择它们时轻松跳转到它们： 

selector.addEventListener('change', function() {
    document.location.hash = selector.value;
});

在这个小提琴中尝试一下。

于 2013-07-09T23:21:36.817 回答
0

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

$('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');

小提琴

于 2013-07-09T23:26:36.047 回答
0

这有点接近...

<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>

演示

其余的取决于你让它看起来不错。

于 2013-07-09T23:29:55.840 回答