javascript - jQuery Toggle 无法使用 this.name

Question

我创建了一个带有验证的联系表单，并试图加入一个帮助功能，即有人单击问号并弹出一个带有解释的 div。

我找到了一种使用变量和“this”选择器的方法，它似乎工作正常，但它已停止工作，我似乎无法阻止默认的 # 行为。

看过类似的问题后，没有任何迹象表明问题可能是什么。这是功能：

$(function() {
    //show/hide
    $('a.form-question-help-link').click(function(event) {
        event.preventDefault();
        var divname= this.name;
        $("#"+divname).toggle();
        return false;
});

});

jsFiddle 链接：http: //jsfiddle.net/dvmac/dpVzL/2/

Answer 1

选择#器根据 id 进行选择。如果要从名称中选择，则需要属性选择器：'[name="' + divname + '"]'

$('a.form-question-help-link').click(function(event) {
    event.preventDefault();
    var divname= this.name;
    $('[name="' + divname + '"]').toggle();
    return false;
});

一个更好的方法是这样做：$(this)

$('a.form-question-help-link').click(function(event) {
    event.preventDefault();
    $(this).toggle();
    return false;
});

如果你有动态创建的元素，那么你可能想试试这个：

$(document).on('click', 'a.form-question-help-link', function(e) {
    $(this).toggle();        
    e.preventDefault();
});

Answer 2

使用$(this).attr('name')或$(this).prop('name')。

检查这个小提琴。

Answer 3

should be $(this) instead of this

$(function() {
        //show/hide
        $('a.form-question-help-link').click(function(event) {
            event.preventDefault();
            var divname= $(this).name;
            $("#"+divname).toggle();
            return false;
    });

    });