0

段落テキストを非表示または表示するためにリンクをクリックすると、リンクが「(表示)」または「(非表示)」になるのに問題があります。

動作しないコードは次のとおりです。

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

上記のコードで。リンクの表示と非表示のオンとオフを切り替えていますが、テキストは変化しません。そのままです（「隠す」）。

4

2 に答える 2

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);
        });
于 2013-01-25T01:39:57.847 に答える
0

テキストまたはリンクの表示と非表示を切り替えたい場合。ここでリンクをクリックして段落を切り替えたいとしましょう。

<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>

あなたの質問が不明確であるため、これがあなたが望むものであることを願っています..

于 2013-01-25T01:44:03.807 に答える