风格背景从第二次点击颜色不会工作？

Question

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

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!') 
 
    } 
 
});

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

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）

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

output { 
 
    display: block 
 
}

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

SNIPPET 2（jQuery的）

/* 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); 
 
});

output { 
 
    display: block; 
 
}

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