Question

我的第一次点击很好，它改变了颜色背景但是当我添加第二个条件时，它不会工作。

＆＃13;

var showBox = $('.show');

showBox.click(function(){
    if (parseInt($(this).attr('value')[0]) === 1 ){  
       $(this).css('backgroundColor','red');
    }

   if (parseInt($(this).attr('value')[1]) === 2){  
       $(this).css('backgroundColor','red');   
    }else{
       alert('uh oh!')
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main-cont" class="container">
  <div class="show" value=1>1</div>
  <div class="show" value=2>2</div>
  <div class="show" value=3>3</div>
  <div class="show" value=4>4</div>
</div>

＆＃13;

Answer 1

问题：

当您尝试访问$(this).attr('value')[1]的第二项时，当它只返回一项时，主要问题来自此.attr('value')表达式。

第二个使用value作为div的直接属性，使您的HTML无效。

建议的解决方案：

您应该使用 data-* attributes ，因为value不是div代码的属性，因此您的HTML将如下所示：

<div id="main-cont" class="container">
    <div class="show" data-value=1>1</div>
    <div class="show" data-value=2>2</div>
    <div class="show" data-value=3>3</div>
    <div class="show" data-value=4>4</div>
</div>

您可以使用jQuery方法 data() 获取此值：

$(this).data('value');

注意：不需要解析parseInt() JS会自动为您执行此操作。

希望这有帮助。

$('.show').click(function(){
  var show_value = $(this).data('value');

  if ( show_value === 1 ){  
     $(this).css('backgroundColor','red');
  }else if ( show_value === 2 ){
     $(this).css('backgroundColor','green');   
  }else{
      alert('uh oh!');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main-cont" class="container">
  <div class="show" data-value=1>1</div>
  <div class="show" data-value=2>2</div>
  <div class="show" data-value=3>3</div>
  <div class="show" data-value=4>4</div>
</div>

Answer 2

通过将事件侦听器添加到所有这些子元素的父级来使用事件委派。详细信息在代码段中进行了评论。

BTW ，我将标签更改为表单控件，因为它们具有value属性。 AFAIK，value是表单元素所独有的，divs不应具有value属性。

SNIPPET 1 （香草JavaScript）

＆＃13;

// Reference the parent element
var main = document.getElementById('main-cont');

// Register the click event to the parent
main.addEventListener('click', function(event) {

  /* If the node is the last in the capture
  || phase (i.e. target phase), then
  || that is event.target (node that's clicked)
  */
  if (event.target !== event.currentTarget) {
    var target = event.target;
    target.style.backgroundColor = 'red';
    console.log('The value of clicked node is ' + target.value);
  }
}, false);

/* By taking advantage of the bubbling phase we can
|| determine the element that was clicked and act
|| accordingly. By calling our methods/functions
|| in the correct context of the clicked node
|| event.target
*/

＆＃13;

output {
  display: block
}

＆＃13;

<fieldset id="main-cont" class="container">
  <output class="show" value=1> 1
  </output>
  <output class="show" value=2> 2
  </output>
  <output class="show" value=3> 3
  </output>
  <output class="show" value=4> 4
  </output>
</fieldset>

＆＃13;

SNIPPET 2 （jQuery）

＆＃13;

/* Delegate the click event by using the.on()
|| method. All nodes with the class of .show
|| is assigned as the context (which will
|| make `this` referenced to the node clicked
*/
$(document).on('click', '.show', function(event) {

  // Store the value of `this` in a var
  var value = $(this).val();

  // Use the css() method to change `this` style
  $(this).css('background-color', 'red');

  console.log('The value of the clicked node is ' + value);
});

＆＃13;

output {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<fieldset id="main-cont" class="container">
  <output class="show" value=1> 1
  </output>
  <output class="show" value=2> 2
  </output>
  <output class="show" value=3> 3
  </output>
  <output class="show" value=4> 4
  </output>
</fieldset>

＆＃13;

样式背景第二次点击的颜色不起作用？

2 个答案: