Question

我不是jQuery的专家，我想做的就是替换我点击的第一个具有不同内容的类.arrow的元素，然后再次点击时再次返回原始内容，所有虽然我已经找到了最接近li标签的扩展和折叠。

重要我有.arrow课程的多个元素我只想让点击的.arrow课程受到影响。

感谢您的帮助。

$(document).ready(function() {
    $('.arrow').click(function(){
        $(this).closest('li').find('ol:first').fadeToggle('slow', 'linear');
        // prevent default action
        return false;       
    }); 
});

Answer 1

$('.arrow').click(function(){
    $(this).text(function(_,txt) {
        return txt === 'Show' ? 'Hide' : 'Show';
    })
    $(this).closest('li').find('ol:first').fadeToggle('slow', 'linear');
    // prevent default action
    return false;       
});

出于本示例的目的，我只是从show/hide切换文本。

如果内容是动态的，那么我更愿意使用HTML-5 data- *属性来存储必须显示的文本。

<强> Check Fiddle

Answer 2

假设您的.arrow元素可能包含的内容超过纯文本，并且在任何时候最多只有1个.arrow元素被换出：

var swapbuffer = <alternative_content>; // html fragment
//...

$('.arrow').click( function (eve) {
    var temp_html = swapbuffer;

    temp_html = swapbuffer;
    swapbuffer = $(this).html();
    $(this).html(temp_html);
    $(this).closest('li').find('ol:first').fadeToggle('slow', 'linear');

    // prevent default action
    eve.preventDefault;
    return false;       
});

你没有指明你的意思是说'第一个.arrow元素被点击' - 你的意思是第一个事件被分派到（代码是针对这个场景），还是词法上的第一个元素您点击了一系列点击中的第一个，还是完全不同的其他内容？希望这个建议已经有用了。

虽然事件处理程序是按类定义的，但代码仅针对接收事件的各个元素执行 - 如果您有嵌套的.arrow元素，除了跳过默认操作之外，您可能希望停止事件传播（使用的方法是eve.stopPropagation，eve.stopImmediatePropagation）。

替换单击的元素内容，然后在第二次单击时再次返回

2 个答案: