如何修改此Javascript以允许将HTML插入到Button文本中?

How can I amend this Javascript to allow HTML to be inserted into the Button text?

本文关键字：插入 HTML Button 文本 何修改 修改 Javascript      更新时间：2023-09-26

我已经成功地得到了@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 AND 查看更多照片更改为隐藏额外照片

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

用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

使用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';
        });
    });
});

由于问题标记为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);
}
相关文章：