如何實現切換按鈕（更多/更少）使用jQuery的HTML（）方法

Question

這是我目前的jQuery代碼。它將按鈕值更改爲更少。但不是相反。

$("p").hide(); 

$(".btn").click(function() 
{ 


$("p").toggle(); 

$(".btn").html("less"); 

$(".btn").html("more"); 

}); 

Answer 1

試試這個代碼

$("p").hide(); 
$(".btn").html("more"); 
$(".btn").click(function() { 
    $("p").toggle(); 
    if($('p').css('display') == 'none') { 
    $(".btn").html("more"); 
    } else { 
    $(".btn").html("less"); 
    } 
}); 

Answer 2

使用以下代碼：

$(".btn").toggle(function() { 
    $(".btn").html("less"); 
}, function() { 
    $(".btn").html("more"); 
}); 

被切換功能內聲明上述兩個功能將被用於文本less和more之間切換。

我懷疑你正試圖改變按鈕的文本，如果是，那麼使用.val()代替.html()

Answer 3

$('input').click(function() { 
 
    alert($(this).val()) 
 
    if ($(this).val() == 'more') { 
 
    $(this).val('less') 
 
    } else { 
 
    $(this).val('more') 
 
    } 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type='button' value='more' />

像這樣做。如果使用的是沒有價值的其他元素只是改變.val()到.text() or .html()

Answer 4

這裏是一個可能的解決方案：

$(document).ready(function() { 
 
    
 
$(".btn").on('click', function(){ 
 

 
    if ($(this).text() == "less") 
 
    { 
 
     $(this).text('more') 
 
    } 
 
    else 
 
    { 
 
     $(this).text('less') 
 
    } 
 

 
}); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn">less</button>