JQuery切換（）html數據

我曾嘗試尋找解決方案，但似乎無法找到工作答案。我可能錯過了一些明顯的東西。JQuery切換（）html數據

我有一個鏈接來顯示狀態的最新評論。當鏈接被點擊時，鏈接數據變爲「關閉」（全部好），但是當關閉然後點擊切換DIV鏈接數據保持「關閉」時，我希望它返回到原始文本（即3條評論）。

的HTML：

<a class="comments" id="coms-<?php echo $statmainID; ?>" href="javascript:;"><i class="fa fa-comment"></i> <?php echo $numComs; ?> Comments</a> 

<div id="comss<?php echo $statmainID; ?>" style="display:none;">Comments Here</div>

jQuery的：

$(function(){ 
    $('body').on('click', '.comments', function(){ 
     var cID =$(this).attr('id'); 
     var theID = cID.split("-"); 
     var divID = theID[1]; 
     $('#comss'+divID).toggle("slide"); 
     $('.comments'+divID).html('Close'); 
     return false; 
    }); 
});

與往常一樣，從你大師的任何幫助，總是讚賞。

親切的問候。

來源

2015-12-26 NOJ75

我不知道我理解的問題。你正在將'.comments'元素的文本修改爲「關閉」，爲什麼它會「神奇地」重新出現？這與只顯示/隱藏元素的'toggle'無關。 – Lucero

我只是希望「close」文本在切換關閉div後切換回註釋。 – NOJ75

您可以使用數據屬性來存儲原始文本。然後你可以再次顯示它。

HTML

<body> 
    <a class="comments" id="coms-1" href="javascript:;" data-id="comss1" data-text="4 Comments"> 
     <i class="fa fa-comment"></i> 4 Comments 
    </a> 
    <div id="comss1" style="display:none;">Comments Here</div> 

    <a class="comments" id="coms-2" href="javascript:;" data-id="comss2" data-text="2 Comments"> 
     <i class="fa fa-comment"></i> 2 Comments 
    </a> 
    <div id="comss2" style="display:none;">Comments Here</div> 
</body>

$(function(){ 
    $('body').on('click', '.comments', function(){ 
     var cID =$(this).attr('id'); 
     var theID = cID.split("-"); 
     var divID = theID[1]; 
     $('#comss'+divID).toggle("slide"); 

     var comments = $('#coms-'+divID); 
     if($(comments).text() === "Close"){ 
      $(comments).html($(comments).data("text")); 
     } else { 
      $(comments).html('Close'); 
     } 

     return false; 
    }); 
});

來源

2015-12-26 13:23:19 Zoli

切換工作，但鏈接內沒有數據更改。 – NOJ75

http://jsfiddle.net/qjwpq4m6/它似乎在工作。當您點擊「2條評論」時，評論將被關閉，當您點擊「關閉」時，文本會變回「2條評論」，是不是您想要的？ – Zoli

@ NOJ75 - 請注意，您的選擇器與問題中的HTML不匹配，不存在'.comments-something'類等。 – adeneo

WORKING FIDDLE

var prevText=$(".comments").text(); 
$(".comments").click(function(){ 
    if($(this).text().indexOf("Comments")>=0){ 
     $(this).text("Close"); 
    } 
    else 
    { 
     $(this).text(prevText); 
    } 
    return false; 
});

UPDATE

FIDDLE WITH STATIC NUMBER OF COMMENTS

來源

2015-12-26 13:32:36 Hemal

謝謝你的時間和精力。這個問題已經在上面回答了。但是，無論如何，謝謝你。 – NOJ75

如果你想 – Hemal

你可以像下面這樣做。將原始文本保留在data attribute中，並在Close點擊時顯示。

$('body').on('click', '.comments', function() { 
 
    var cID = $(this).attr('id'); 
 
    var theID = cID.split("-"); 
 
    var divID = theID[1]; 
 
    $('#comss' + divID).toggle("slide"); 
 

 
    if ($(this).html().trim() != 'Close') { 
 
    $(this).data('text', $(this).html()); 
 
    $(this).html('Close'); 
 
    } else { 
 
    $(this).html($(this).data('text')); 
 
    } 
 

 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" /> 
 

 
<a class="comments" id="coms-1" href="javascript:;"><i class="fa fa-comment"></i> 1 Comments</a> 
 
<div id="comss1" style="display:none;">Comments Here</div>

來源

2015-12-26 13:55:09 Azim

你可以upvote這很棒。它允許我保留Font Awesome圖標。謝謝@Azim。 – NOJ75

JQuery切換（）html數據

回答

相關問題