Javascript JQuery toggle（）html数据_Javascript_Jquery_Html

Javascript JQuery toggle（）html数据

javascript jquery html

Javascript JQuery toggle（）html数据,javascript,jquery,html,Javascript,Jquery,Html,我试图寻找解决这个问题的方法，但似乎找不到有效的答案。我可能错过了一些明显的东西我有一个链接来显示对状态的最新评论。当点击链接时，链接数据变为“关闭”（全部正常），但当点击关闭以切换DIV时，链接数据保持“关闭”，我希望它返回到原始文本（即3条注释） HTML： <a class="comments" id="coms-<?php echo $statmainID; ?>" href="javascript:;"><i class="fa fa-comment"&

我试图寻找解决这个问题的方法，但似乎找不到有效的答案。我可能错过了一些明显的东西

我有一个链接来显示对状态的最新评论。当点击链接时，链接数据变为“关闭”（全部正常），但当点击关闭以切换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>

和往常一样，你们上师的任何帮助都会得到感激

问候。

您可以使用数据属性存储原始文本。然后你可以再看一遍

HTML

更新

你可以像下面这样做。将原始文本保留在

数据属性中

并在启用

关闭时显示它

单击

$（'body'）。在（'click'，'comments'，function（）上{
var cID=$（this.attr（'id'）；
var theID=cID.split（“-”）；
var divID=theID[1]；
$（'comss'+divID）.toggle（“slide”）；
如果（$（this.html（）.trim（）！='Close'）{
$（this.data（'text'，$（this.html（））；
$（this.html（'Close'）；
}否则{
$（this.html（$（this.data（'text'））；
}
返回false；
});

这里的评论
我不确定我是否理解这个问题。您正在将.comments
元素的文本修改为“Close”，为什么它会“神奇地”重新出现？这与只显示/隐藏元素的切换无关。我只希望切换关闭div后，“关闭”文本变回注释。切换有效，但链接内的数据不会更改。它似乎起作用了。当你点击“2条评论”时，评论被关闭，当你点击“关闭”时，文本变回“2条评论”，这不是你想要的吗？@NOJ75-请注意，你的选择器与问题中的HTML不匹配，没有。comments something类等@Zoli我刚刚将你的var更改为这个var comments=$（'#coms-'+divID）；现在它似乎工作得很好。@NOJ75我发现问题在于我没有用多个div测试它。我将更改代码。感谢您的时间和努力。上述问题已得到回答。不过，还是要谢谢你。这太棒了。它允许我保持字体的可怕的图标到位。谢谢你，阿齐姆。
$(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;
     });
});

<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;
     });
});

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