Question

我有一个HTML页面，我想根据jQuery手风琴的选定元素更改H3标签的文本。这个link提供了一个小型演示。

<div id="acc1" class="basic">
    <h3><a href="#">aaa</a></h3>
    <div></div>
    <h3><a href="#">bbb</a></h3>
    <div></div>
    <h3><a href="#">ccc</a></h3>
    <div></div>
</div>
<h3 class="ui-widget-header">xyz</h3>

$(document).ready(function () {
    $("#acc1").accordion({
        heightStyle: "fill",
        active: false,
        autoheight: false,
        collapsible: true,
        alwaysOpen: false,
        activate: function (event, ui) {
            var idx = $("#acc1").accordion("option", "active");
            var txt = $("#acc1 > h3:nth-child(" + (idx + 1) + ") > a").text();
            $("h3.ui-widget-header").text((idx + 1) + " ---> " + txt);
        }
    });
});

acc1在开始时折叠，很快一个元素点击，jQuery函数读取其文本并将其分配给H3标记。但只是第一次点击，页面加载后，工作正常。之后，只分配错误的值。

我这样做是错误的还是jQuery有问题？

用过的东西：jQuery v1.9.0，jQuery UI v1.9.2

此致 grafl

Answer 1

:nth-child会考虑所有兄弟姐妹，而不仅仅是那些符合您认可的标签的兄弟姐妹。所以h3:nth-child(2)（例如）意味着＆＃34; h3元素也是其父母的第二个孩子，＆＃34; 不＆＃34;其父级中的第二个h3元素。＆＃34;

对于后者，您可以使用jQuery的伪选择器:eq（使用基于0的索引）或.eq函数（也可以）。

所以改变这一行：

var txt = $("#acc1 > h3:nth-child(" + (idx + 1) + ") > a").text();

为：

var txt = $("#acc1 > h3").eq(idx).children("a").text();

Updated Fiddle

或：

var txt = $("#acc1 > h3:eq(" + idx + ") > a").text();

Updated Fiddle

Answer 2

这是我的解决方案：

$(document).ready(function () {
    $("#acc1").accordion({
        heightStyle: "fill",
        active: false,
        autoheight: false,
        collapsible: true,
        alwaysOpen: false,
        activate: function (event, ui) {            
        }
    });

    $("h3").click(function(){    
        var txt = $(this).find('a').text(); 
        $(".ui-widget-header").html(txt);  
    });
});

JSFIDDLE DEMO

jQuery - 错误的技术或错误

2 个答案: