0

@PSLによるこの回答の最初のJavascriptコードを正常に機能させ、独自のバージョンを作成しました（以下を参照）。このコードは基本的に、ボタンがクリックされるたびにボタン内のテキストを変更します。しかし、ボタン テキストに HTML を挿入することはできません。これを行うと、実行するのではなく、ボタン テキストに HTML コードを表示するだけです。ボタンがクリックされるたびにHTMLをボタンテキストに挿入できるように、以下のJavascriptを修正する方法を誰か教えてください。ありがとうございました！

たとえば、私は

現在の 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に変更され、さらに View More PhotosがHide Extra Photosに変更されました

<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

質問はjQueryではなくjavascriptでタグ付けされているため、誰かが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 に答える
0

text ()の代わりにhtml()を使用する

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

text() の代わりに html() メソッドを使用すると動作するはずです

$(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 に答える