如何使用jquery顯示派生自變量的類？

Question

我試圖利用我的元素的值，以使某些類出現在CSS中，但是，它不起作用。能否請你幫忙？該代碼與選項元素一起工作。請檢查下面的小提琴： https://jsfiddle.net/w99vunx6/

$("#zero").click(function() { 
    var $target = $('.c' + $(this).val()); 
    $target.show(); 
}); 

$("zeroa").click(function() { 
    var $target = $('.cc' + $(this).val()); 
    $target.show(); 
}); 

Answer 1

雨果，你可以使用，這將是對value屬性更改爲數據屬性和訪問它$(this).data('value')而不是一個解決方案。就像這樣：

$("#zero").click(function() { 
    var $target = $('.c' + $(this).data('value')); 
    $target.show(); 
}); 

<p id="zero" data-value="0" style="display: inline;">Zero</p> 

的jsfiddle：https://jsfiddle.net/w99vunx6/1/

Answer 2

這裏的問題是，你分配一個value屬性爲<p>段落標記。

value屬性只能分配到以下元素： <button>，<input>，<li>，<option>，<progress>，<param>

嘗試在該段落的標籤，而不是像這樣靶向id S：

$(document).ready(function() { 
 
    $("#zero").click(function() { 
 
    var $target = $('.c' + this.id); 
 
    $target.show(); 
 
    }); 
 
    $("#zeroa").click(function() { 
 
    var $target = $('.cc' + this.id); 
 
    $target.show(); 
 
    }); 
 
});

.czero { 
 
    display: none; 
 
} 
 

 
.cczeroa { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="labels"> 
 
    <p id="zero" style="display: inline;">Zero</p> 
 
    <p id="zeroa" class="czero">Zero a</p> 
 
    <p id="zeroazero" class="cczeroa">Zero a Zero</p> 
 
</div>

Fiddle Demo。