風格背景從第二次點擊顏色不會工作？

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>