4

我一直在尝试解决这个问题，我取得了一些成功，但我现在陷入了困境。

我有这个结构：

<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 时切换单词tonen（意思是打开）和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>
4

4 回答 4

4

您只需要获取当前span点击的孩子的h4文本并根据检索到的跨度文本更改为相反的文本：

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

更新小提琴

于 2013-05-05T16:13:59.107 回答
2

LIVE DEMO 1

$("h4").append(" - <span>tonen</span>").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(" - <span>tonen</span><span style='display:none;'>verbergen</span>").click(function() {
     $(this).nextUntil("hr").slideToggle(400).end().find('span').toggle();
}).nextUntil("hr").hide();
于 2013-05-05T16:24:10.397 回答
1

看起来您从未声明过 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>

演示

于 2013-05-05T16:07:11.630 回答
0

这是一个简短的脚本，显示第一段但隐藏所有其他段落，除非单击“更多...”。它甚至创建了“更多...”按钮。使用它所需要做的就是将文本块（包含许多段落）包装在 ... 之间并启动脚本：

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

我希望这个对你有用

于 2014-11-13T13:04:56.993 回答