0

我有很多这样的div：

<div id="one" onclick="test('important data one')">ONE</div>
<div id="two" onclick="test('important data two')">TWO</div>

我有一个这样的jquery函数：

function test(data){
  //do important stuff with data
}

在那个函数中，我需要获取被点击的 div 的 id。$(this) 不起作用。我可以将它作为变量传递，但我不想更改 html（很多）。可以在函数中访问div而不更改html吗？

4

5 回答 5

1

为 Firefox 支持编辑：

<div id="one" onclick="test('important data one',this)">ONE</div>

只需将其作为上述参数发送即可。

function test(data,el) {
    //do important stuff with data
    alert(el.id);
}

http://jsfiddle.net/kJFhP/3/

于 2013-05-27T23:01:13.210 回答
0

您需要click使用 jQuery 设置处理程序以使其按预期工作：

$('#one').click(function() {
  // here you can use $(this)
})
于 2013-05-27T22:59:38.620 回答
0

为什么不更改您的函数以this作为参数传递？

<div id="one" onclick="test('important data one', this)">ONE</div>
<div id="two" onclick="test('important data two', this)">TWO</div>

然后在你的函数中使用它：

function test(data, clickedElement){
  //do important stuff with data and the clicked element
}
于 2013-05-27T22:57:47.920 回答
0

您可以添加事件参数来获取事件目标：

事件

function test(data, e) {
    // do important stuff with data
    var evt=e||window.event;
    var el=evt.target||evt.srcElement;
    var id=el.id; // id of the clicked div
}

这将需要这些调用：

<div id="one" onclick="test('important data one', event)">ONE</div>
<div id="two" onclick="test('important data two', event)">TWO</div>

或者，如果您认为除了这个特定元素之外不需要其他任何东西，您可以像这样直接传递它：

元素

function test(data, element) {
    // do important stuff with data
    var id=element.id;
}

这将需要这些调用：

<div id="one" onclick="test('important data one', this)">ONE</div>
<div id="two" onclick="test('important data two', this)">TWO</div>

不同之处在于，在第一种情况下，您最终可以获得有关刚刚处理的事件的更多信息。在第二种情况下，您只能获取有关触发事件的元素的信息（如果您认为您永远不需要有关该事件的更多信息，则效率更高）。

于 2013-05-27T23:05:02.220 回答
0

我会在 javascript 中设置您的点击处理程序，而不是在 html 中。最好的做法是把所有东西都分开，这会让事情更容易维护。如果我不得不写，你的案例看起来像这样：

HTML

<div id="one" class='test' data-test='important data one'>ONE</div>
<div id="two" class='test' data-test='important data two'>TWO</div>

jQuery

    // your function
    function test($div){
      alert('my id is [' + $div.attr('id') + '] and my data is [' + $div.attr('data') . ']'); 
    }

    // when the dom is ready
    $(document).ready(function() {
        // set the click handlers
        $('.test').click(function() {
           // call your function, with the trigger (as a jQuery object) as parameter        
           test($(this));
        });
    });

我在这里设置了一个小例子：http: //jsfiddle.net/9fwjQ/

我认为这应该可以自行解释，但请随时询问您是否需要任何进一步的帮助。

于 2013-05-27T23:09:01.573 回答