javascript - JQuery:在单击功能中切换多个文本

Question

这个问题已经有答案了:

jQuery Toggle Text? (20 个回答)

已关闭 10 年前。

我有一个 JQuery 函数，可以切换数据库中的列(根据 datatables.net)

<a href="javascript:void(0);" onclick="fnShowHide([1]);" id="name">Show Name</a>

点击Show Name将隐藏该列，但我现在还想将链接更改为 Hide Name 。

有多个链接可以隐藏/显示列，例如显示地址、显示公司等，并且它们都转到相同的 fnShowHide 函数。

JQuery 切换无法嵌入到点击中。 (this).text也不行。 fnShowHide 外部的单独切换函数将链接设置为 display:none

function fnShowHide( iCol )
        {

Answer 1

试试这个方法:

标记

<a href="javascript:void(0);" onclick="fnShowHide.call(this, [1]);" id="name">Show Name</a>

JS

function fnShowHide( iCol ) {
 //Your code
    $(this).text(function(_, text) { //now this refers to the element clicked
        return text === 'Show Name' ? 'Hide Name' : 'Show Name';
   });
}

<强> Fiddle

或者使用jquery进行事件注册并去掉元素上的内联onclick属性，使用data-*属性指定元素的相关数据并使用jquery data api来获取它:

化妆

 <a href="javascript:void(0);" data-icol="[1]" id="name">Show Name</a>

JS

$(function(){
     $('#name').click(fnShowHide);
});

function fnShowHide()
{
     var iCol = $(this).data('icol'); //will give [1]
         //Your code
     $(this).text(function(_, text) { //now this refers to the element clicked
        return text === 'Show Name' ? 'Hide Name' : 'Show Name';
     });
}

<强> Demo

更新

基于评论支持多个字段。

$(function () {
    $('.fields').click(fnShowHide);
});

var showregex = /^Show/i; //matches starting Show word
var hideregex = /^Hide/i; //matches starting Hide word

function fnShowHide() {

    var iCol = $(this).data('icol'); //will give [1]
    console.log(iCol);
    //Your code
    $(this).text(function (_, text) { //now this refers to the element clicked

    return showregex.test(text) ? //test if it Show
                 text.replace(showregex, 'Hide') : //replace it with hide
                 text.replace(hideregex, 'Show'); // else replace it with show

    });
}

<强> Fiddle