Question

我有很多像这样的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。 $（这个）不起作用。我可以将它作为变量传递但我不想更改html（很多）。可以在函数中访问div而不更改html吗？

Answer 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/

Answer 2

为什么不改变你的函数来传递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
}

Answer 3

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

$('#one').click(function() {
  // here you can use $(this)
})

Answer 4

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

<强>事件

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>

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

Answer 5

我会在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/

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

得到有onclick的div

5 个答案: