Question

我有一个如下所示的点击功能：

jQuery('#phy-more').click(function() {
            // slideToggle slides open and closes address and phone number
    jQuery('.views-field-field-satellite-address').slideToggle();
    jQuery('.views-field-field-satellite-phone').slideToggle();
            // text displays "More" on page load and i want it to change to less
                // when the address and phone display then back to more when hidden
    jQuery('#phy-more').text('LESS');
});

正如您在注释掉的代码中所看到的那样，正如我现在所看到的那样，单击时文本将更改为LESS。将其切换为在加载时显示More（这是默认设置）然后切换LESS和More的最佳方法是什么？

我是使用jQuery的新手，非常感谢任何帮助。谢谢。

Answer 1

您可以通过ternary operator函数和.is()选择器使用:visible来实现您的目标

尝试，

jQuery('#phy-more')
.text((jQuery('.views-field-field-satellite-address').is(':visible'))?'LESS':'MORE');

Answer 2

我前段时间制作了一个小插件，但并非万无一失。你可以尝试一下！

在您的代码中插入：

if(!$.fn.toggleText){
$.fn.toggleText = function(text1, text2){
    var objText = {};
    objText[text1] = text2;
    objText[text2] = text1;
    return this.each(function(){
        var $this = $(this);
        $this.text(objText[$.trim($this.text())]);
    })
}
}

然后做：

jQuery('#phy-more').toggleText('LESS', 'MORE');

jQuery - 在单击函数中切换文本的最佳方法

2 个答案: