Question

我有一系列div，所有相同的类都没有ID。我想在点击时更改div的背景。我测试了这个功能，它运行正常。但是当我以这个的形式访问元素时，它无法正常工作。问题是如何让buttonpressed（）只对点击的div工作？

HTML

<div id="navbar">
    <div class="navitem" onclick="buttonpressed()"><p>Membership</p></div>
    <div class="navitem" onclick="buttonpressed()"><p>Certification</p></div>
    <div class="navitem" onclick="buttonpressed()"><p>Foundation</p></div>
    <div class="navitem" onclick="buttonpressed()"><p>Seminars</p></div>
    <div class="navitem" onclick="buttonpressed()"><p>Councils</p></div>
</div>

的Javascript

function buttonpressed() {
    var bgString = "url('navbuttonpressed.png')";
    $(this).css('backgroundImage',bgString);
}

Answer 1

由于您正在使用jQuery，您可以（并且应该）删除内联事件处理并使用：

$( document ).ready(function() {
    $('.navitem').click(function(){
        var bgString = "url('navbuttonpressed.png')";
        $(this).css('backgroundImage',bgString);
    })
});

<强> jsFiddle example

Answer 2

使用HTML内联事件处理程序时，this会引用您的窗口。如果您通过JavaScript附加事件处理程序，它将按预期工作：

＆＃13;

$(".navitem").on("click", function () {
  var bgString = "url('navbuttonpressed.png')";
  $(this).css('backgroundImage',bgString);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navbar">
  <div class="navitem"><p>Membership</p></div>
  <div class="navitem"><p>Certification</p></div>
  <div class="navitem"><p>Foundation</p></div>
  <div class="navitem"><p>Seminars</p></div>
  <div class="navitem"><p>Councils</p></div>
</div>

＆＃13;

Answer 3

如果您改变了捕捉活动的方式，您可以访问此内容：

case Array(item1, item2 , ..., itemN) => List(item1, item2, itemK, itemN)

HTML

$('.navitem').on('click', function() {
     var bgString = "url('navbuttonpressed.png')";
     $(this).css('backgroundImage',bgString);
})

Answer 4

$(".navitem").click(function(){
  $(this).css('background-image', 'url(https://www.google.pt/images/nav_logo195.png)');
});

演示：

http://codepen.io/tuga/pen/bdddGa

选择div时使用$（this）

4 个答案: