jQuery htmlでのテキストのクリックの切り替え

jQueryを使用して折りたたみタイプのものを作成しようとしています。「もっと多くのモデルを表示する」と「少ないモデルを表示する」との間でテキストを切り替えることを除いて、すべてうまく動作し、何をすべきかわからない。すべての応答のためのjQuery htmlでのテキストのクリックの切り替え

<a id='roll-more' data-toggle="collapse" href=".roll-img2" class="text-dark"> 
    Show more models <span class="glyphicon glyphicon-chevron-down"></span> 
</a> 

$('#roll-more').toggle(function() { 
    $('#roll-more').html('Show less models <span class="glyphicon glyphicon-chevron-up"></span>'); 
}, function() { 
    $('#roll-more').html('Show more models <span class="glyphicon glyphicon-chevron-down"></span>'); 
});

EDIT おかげで、私は代わりに、これをやってしまった。ここでは、コードです。それはとてもシンプル:)だったと信じてすることはできません））

$('#roll-more').on('click',function() { 
    if($('#roll-more').html() == 'Show more models <span class="glyphicon glyphicon-chevron-down"></span>') { 
     $('#roll-more').html('Show less models <span class="glyphicon glyphicon-chevron-up"></span>') 
    } else { 
     $('#roll-more').html('Show more models <span class="glyphicon glyphicon-chevron-down"></span>') 
    } 
});

出典

2017-08-23 Arvin Ansari

またはトグル機能を使用せずに、あなたが隠しを使用することができますがこの値に基づいて見えるものを決定するために0または1のような値を格納するための入力。ここでは例：

$('#roll-more').click(function() { 
 
\t \t if($("#toggle").val()==1){ 
 
    \t $('#roll-more').html('Show less models <span class="glyphicon glyphicon-chevron-up"></span>'); 
 
     $('#toggle').val(0); 
 
     } 
 
     else{ 
 
    \t \t $('#roll-more').html('Show more models <span class="glyphicon glyphicon-chevron-down"></span>'); 
 
     \t $('#toggle').val(1); 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="toggle" type="hidden" value="1"/> 
 
<a id='roll-more' data-toggle="collapse" class="text-dark"> 
 
    Show more models <span class="glyphicon glyphicon-chevron-down"></span> 
 
</a>

出典

2017-08-23 06:59:19 amicoderozer

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "UTF-8"> 
     <meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1"> 
     <title>Hello World</title> 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 

    </head> 

    <body> 
    <span id='roll-more' class="text-dark" style="color:blue;cursor: pointer "> 
    Show more models <span class="glyphicon glyphicon-chevron-down"></span> 
</span><br/> 
<span id="contanincll" style="display: none"> 
This is loreipus content. This is loreipus content. This is loreipus content. This is loreipus content. 

</span> 


    </body> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 


$('#roll-more').on('click',function(e) { 
e.preventDefault(); 
    $(this).html('Show less models <span class="glyphicon glyphicon-chevron-up"></span>'); 
    $("#contanincll").toggle(); 
}, function() { 
    $(this).html('Show more models <span class="glyphicon glyphicon-chevron-down"></span>'); 
    $("#contanincll").toggle(); 
}); 
}); 
    </script> 

</html>

出典

2017-08-23 06:49:14 user3888958

あなたはこの試みることができる：

$('#roll-more').click(function() { 
 
    var link = $(this); 
 
    $('.text').toggle('fast', function() { 
 
     if ($(this).is(":visible")) { 
 
     link.text('Show less models'); 
 
     } else { 
 
     link.text('Show more models'); 
 
    } 
 
    }); 
 
});

.text { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id='roll-more' data-toggle="collapse" href="#roll-img2" class="text-dark"> 
 
    Show more models <span class="glyphicon glyphicon-chevron-down"></span> 
 
</a> 
 

 
<div class="text"> 
 
    <p>text</p> 
 
</div>

出典

2017-08-23 06:54:01 RasmusGlenvig

jQuery htmlでのテキストのクリックの切り替え

答えて

関連する問題