0

我已经成功地通过@PSL获得了关于这个答案的第一个 Javascript 代码，并创建了我自己的版本（见下文）。每次单击按钮时，代码基本上都会更改按钮内的文本。但我不能做的是在按钮文本中插入 HTML。当我这样做时，它所做的只是在按钮文本中显示 HTML 代码，而不是执行它。请有人告诉我如何修改下面的 Javascript 以允许每次单击按钮时将 HTML 插入到按钮文本中。谢谢！

例如，我正在使用

当前的 HTML

<button id="viewPhotosButton" type="button" class="btn btn-large" data-toggle="collapse" data-target="#photos-slide"><i class="icon-align-left icon-chevron-down"></i> View More Photos</button>

Javascript

   $(function(){
$('#viewPhotosButton').click(function(){
    $(this).text(function(i,old){
        return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ?  '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos';
    });
});
});

按钮所需的 HTML（单击后） icon-chevron-down已更改为icon-chevron-up并且查看更多照片已更改为隐藏额外照片

<button id="viewPhotosButton" type="button" class="btn btn-large" data-toggle="collapse" data-target="#photos-slide"><i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos</button>
4

3 回答 3

0

使用html()而不是text()

$(function(){
$('#viewPhotosButton').click(function(){
    $(this).html(function(i,old){
        return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ?  '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos';
    });
});
});

JSFiddle

于 2013-06-12T10:01:57.313 回答
0

使用 html() 方法而不是 text() 应该可以工作

$(function(){
    $('#viewPhotosButton').click(function(){
        $(this).html(function(i,old){
            return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ?  '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos';
        });
    });
});
于 2013-06-12T10:02:16.257 回答
0

由于问题是用 javascript 而不是 jQuery 标记的，如果有人来这里寻找非 jQuery 答案，这里有一个非 jQuery 替代方案：

button_element = document.getElementById('viewPhotosButton');
button_element.onclick = function() {
    var i_element = button_element.firstChild;
    var old_class = i_element.getAttribute('class');
    if (old_class == 'icon-align-left icon-chevron-up') {
        var new_class = 'icon-align-left icon-chevron-down';
        var new_text = 'View more photos';
    }
    else {
        var new_class = 'icon-align-left icon-chevron-up';
        var new_text = 'Hide photos';
    }
    i_element.setAttribute('class', new_class);
    var old_text_node = i_element.nextSibling;
    var text_node = document.createTextNode(new_text);
    button_element.replaceChild(text_node, old_text_node);
}
于 2013-06-12T10:54:28.653 回答