Question

当我点击隐藏或显示段落文字的链接时，我无法将链接变为'（show）'或'（hide）'。

这是我得到的代码不起作用：

var old_text = $(this).text();
var new_text = (old_text === '(hide)') ? '(show)' : '(hide)';
var toggle_link = $("<a href='#'> "+ new_text + "</a>");
$(this).after(toggle_link);
toggle_link.on('click', function (event){
  $(this).siblings('p').toggle();
});
$(this).after(toggle_link);

在上面的代码中。我正在切换节目并隐藏链接，但文本没有改变。它只是（'隐藏'）。

Answer 1

尝试这种方式：

var toggle_link = $("<a href='#'>(hide)</a>");
        $(this).after(toggle_link);
        toggle_link.on('click', function (event){
          $(this).siblings('p').toggle();
            var old_text = $(this).text();
            var new_text = (old_text === '(hide)') ? '(show)' : '(hide)';
            $(this).text(new_text);
        });

Answer 2

如果您想在节目和隐藏文字或链接之间切换。让我们假设您想通过点击此处的链接来切换段落。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<a id="toggle" href="#" style="font-size:20px;">Click Me to show the Paragraph</a>
<p id="toggle1">This is the Paragraph for the sake of this demo. Click the above link to Hide me.</p>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>

        $("#toggle").click(function(){
        $("#toggle1").toggle('slow');
        });
</script>
</body>
</html>

我希望这是你想要的，因为你的问题不清楚..

jQuery：显示隐藏文本

2 个答案: