0

我有一个 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 )
        {
4

2 回答 2

2

试试这个方法：

标记

<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';
   });
}

小提琴

或使用 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';
     });
}

演示

更新

基于对多个字段的评论支持。

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

    });
}

小提琴

于 2013-07-09T20:28:07.790 回答
1

您可以使用 jQuerytext方法显示所需的文本

function fnShowHide( iCol ) {

    $(this).text(function(i, txt) {
        return txt === 'Show Name' ? 'Hide Name' : 'Show Name';
   });
}

此外，最好删除inline事件并将它们分配到 javascript 文件中。

HTML

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

并使用data-*属性来保存数字（如果有）。

Javascript

$('a').on('click', fnShowHide);

function fnShowHide() {
    var $this = $(this);
        iCol = $this.data('id');
    $this.text(function (i, txt) {
        return txt === 'Show Name' ? 'Hide Name' : 'Show Name';
    });
}

检查小提琴

于 2013-07-09T20:27:30.653 回答