Question

我试图让我的按钮在点击时显示较少的单词，在没有单击时显示更多单词。

我的jquery如下所示

$("#read_more").click(function() {
    $("#large").toggle();

    }); 

    if ($("#large").is(":visible")) {
        $("#read_more").val("less")
        }

         else { 
            $("#read_more").val("more")
            }
    });

我需要在某处添加一个on toggle事件吗？

提前致谢，D

Answer 1

你需要更换＆＃34;更多＆＃34;和＆＃34;阅读＆＃34;在click事件中，如果＆＃34; #read_more＆＃34;是一个按钮，您需要使用.text而不是.val

$("#read_more").click(function() {
    $("#large").toggle();
    if ($("#large").is(":visible")) {
        $("#read_more").text("less")
    }
    else { 
        $("#read_more").text("more")
    }
});

这是支持html

<div id="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div  id="large" style="display: none">Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<button id="read_more">READ MORE</button>

Answer 2

如何使用单个button：

<button>More</button>

$('button').click(function () {
    if ($(this).text().toLowerCase() == 'more') {
        $(this).text('Less');
    } else {
        $(this).text('More');
    }
})

样本：https://jsfiddle.net/h61019ft/

Answer 3

$( "#read_more" ).toggle(function() {
  $(this).text("less");
}, function() {
   $(this).text("more");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="read_more"> more </div>

注意：此方法签名在jQuery 1.8中已弃用并已删除在jQuery 1.9中。 jQuery还提供了一个名为的动画方法 .toggle()切换元素的可见性。是否动画或触发的事件方法取决于参数集通过。

https://api.jquery.com/toggle-event/

jquery按钮显示不同的值onclick

3 个答案: