Question

我一直试图解决这个问题，我有所成功，但现在我被困住了。

我有这个结构：

<h4>title</h4>
<p>text</p>
<hr />
<h4>title</h4>
<p>text</p>
<p>text</p>
<hr />
<h4>title</h4>
<p>text</p>
<hr />

我基本上想要完成的是在向上和向下滑动P时切换吨（意思是开放）和verbergen（意思是隐藏）。此刻，我用一个单词tonen附加一个跨度，并检查它是否显示。

内容在加载时隐藏，显示tonen，但是当单击h4时，内容会显示但是tonen不会更改为verbergen。我已经阅读过关于直播的内容，但是没有得到它。

<script>
    $(function(){
    $("h4").append("<span> - tonen</span>");
    $("h4").nextUntil("hr").hide();
    $("h4").click(function () {
        $(this).nextUntil("hr").slideToggle("fast");
        if(span.text() == " - tonen"){
            span.text(" - verbergen");
        } else {
            span.text(" - tonen");
        }
    });
    });
</script>

Answer 1

您只需获取当前孩子span点击的h4的文字，然后根据检索到的跨栏文字更改为相反的文字：

$("h4").click(function () {
    $(this).nextUntil("hr").slideToggle("fast");
    var text = $(this).find('span').text();
    $(this).find('span').text(text == " - verbergen " ? " - tonen " : " - verbergen ");
});

Updated Fiddle

Answer 2

的 LIVE DEMO 1

$("h4").append(" - tonen").click(function() { var $sp = $('span', this); $(this).nextUntil("hr").slideToggle("fast"); $sp.text( $sp.text()=="tonen"?"verbergen":"tonen"); }).nextUntil("hr").hide();

的 LIVE DEMO 2

$("h4").append(" - tonenverbergen").click(function() { $(this).nextUntil("hr").slideToggle(400).end().find('span').toggle(); }).nextUntil("hr").hide();

Answer 3

看起来你没有声明你的span变量。你需要选择你将要操作的元素然后它应该工作：

<script>
    $(function(){
        $("h4").append("<span> - tonen</span>");
        $("h4").nextUntil("hr").hide();
        $("h4").click(function () {
            $(this).nextUntil("hr").slideToggle("fast");
            var $span = $(this).find('span');
            if($span.text() == " - tonen"){
               $span.text(" - verbergen");
            } else {
               $span.text(" - tonen");
           }
        });
    });
</script>

Demo

Answer 4

这是一个简短的脚本，显示第一段但隐藏所有其他段落，除非更多...＆＃39;点击。它甚至创造了更多......＆＃39;按钮。你需要做的就是在...之间包装文本块（包含许多段落）并启动脚本：

<script>
$(function(){
    $(".teaser p").eq(0).attr("class","clsTea");
    $(".teaser").after("<span class='moreTea'>more...</span>");
    $(".clsTea").siblings().css("background-color","yellow").hide();
    $(".moreTea").click(
    function(){
        var clktxt = $(".moreTea").text();
        $(".clsTea").siblings().toggle(1000,function(){
            if (clktxt=='more...'){
                $(".moreTea").text('less...');
            } else {
                $(".moreTea").text('more...');
            }
        });
    });
});
</script>

我希望这有助于

单击时Jquery切换文本

4 个答案: