我可以使用第n个子代中的值来调用元素的id吗？

Question

<div class="tiles blue tile-group four-wide" id="tile_system" 
style="border-    color:#07caca;>
<div class="live-tile" data-speed="750" data-delay="3000" value="1" id="1">
    <a href="#"><div><img src="images/r1.gif" class="food-l" /></div></a>
    <div><img src="images/r2.gif" class="food-l"id="2"/></div>
</div>
<div class="live-tile" data-speed="750" data-delay="3000" value="2" id="2">
    <a href="#"><div><img src="images/r1.gif" class="food-l" id="1"/></div></a>
    <div><img src="images/r2.gif" class="food-l"id="2"/></div>
</div>
<div class="live-tile" data-speed="750" data-delay="3000" value="3" id="3">
        <div><img src="images/r3.gif" class="l-other"/></div>
    <div><img src="images/r3.gif" class="l-other"/></div>
</div>

<div class="live-tile" data-speed="750" data-delay="3000" value="4" id="4">
        <div><img src="images/r3.gif" class="l-other"/></div>
    <div><img src="images/r3.gif" class="l-other"/></div>
</div>
<div class="live-tile" data-speed="750" data-delay="3000" value="5" id="5">
    <a href="#"><div><img src="images/r1.gif" class="food-l" id="1"/></div></a>
    <div><img src="images/r2.gif" class="food-l"id="2"/></div>
</div>
<div class="live-tile" data-speed="750" data-delay="3000" value="6" id="6">
    <a href="#"><div><img src="images/r1.gif" class="food-l" id="1"/></div></a>
    <div><img src="images/r2.gif" class="food-l"id="2"/></div>
</div>
<div class="live-tile" data-speed="750" data-delay="3000" value="7" id="7">
        <div><img src="images/r1.gif" class="l-other"/></div>
    <div><img src="images/r2.gif" class="l-other"/></div>
</div>

<div class="live-tile" data-speed="750" data-delay="3000" value="8" id="8">
        <div><img src="images/r3.gif" class="l-other"/></div>
    <div><img src="images/r3.gif" class="l-other"/></div>
</div>

<div class="live-tile" data-speed="750" data-delay="3000" value="9" id="9"> 
        <div><img src="images/r3.gif" class="l-other"/></div>
    <div><img src="images/r3.gif" class="l-other"/></div>
</div>

<div class="live-tile" id = "changemydata" data-speed="750"
 data-delay="3000"" value="10" id="10"> 
        <div><img src="images/r3.gif" class="l-other"/></div>
    <div><img src="images/r3.gif" class="l-other"/></div>
</div>

<div class="live-tile" data-speed="750" data-delay="3000" value="11" id="11">
    <a href="#"><div><img src="images/r1.gif" class="food-l" /></div></a>
    <div><img src="images/r2.gif" class="food-l"id="2"/></div>
</div>
<div class="live-tile" data-speed="750" data-delay="3000" value="12" id="12">
    <a href="#"><div><img src="images/r1.gif" class="food-l" /></div></a>
    <div><img src="images/r2.gif" class="food-l"id="2"/></div>
</div>
<div class="live-tile" data-speed="750" data-delay="3000" value="13" id="13">
        <div><img src="images/r3.gif" class="l-other"/></div>
    <div><img src="images/r3.gif" class="l-other"/></div>
</div>

<div class="live-tile" data-speed="750" data-delay="3000" value="14" id="14">
        <div><img src="images/r3.gif" class="l-other"/></div>
    <div><img src="images/r3.gif" class="l-other"/></div>
</div>
<div class="live-tile" data-speed="750" data-delay="3000" value="15" id="15">   
        <div><img src="images/r3.gif" class="l-other"/></div>
    <div><img src="images/r3.gif" class="l-other"/></div>
</div>
<div class="live-tile" data-speed="750" data-delay="3000" value="16" id="16">   
        <div><img src="images/r3.gif" class="l-other"/></div>
    <div><img src="images/r3.gif" class="l-other"/></div>
</div>

</div>
 <script>

 $(window).load(function() {
$('.live-tile').click(function() {
    var a = $(this).val();
    if ( a%2 == 0)
    {   var b = a + 1;
        $("#live-tile :nth-child(" + a + ")").removeClass('live-tile').addClass('live-tile two-wide');
        $("#live-tile :nth-child(" + b + ")").slideUp(1000);
    }
    else
    {   var c = a - 1;
        $("#live-tile :nth-child(" + a + ")").removeClass('live-tile').addClass('live-tile two-wide');
        $("#live-tile :nth-child(" + c + ")").slideUp(1000);
    }
    });

})；我必须使用此函数相应地替换类的偶数和奇数状态。我已经在它上面工作了很长一段时间，我是stuck.what我应该做什么?这个函数只隐藏下一个或前一个磁贴。

Answer 1

可以，但您需要对a变量进行插值：

var c = $("#system :nth-child("+a+")").attr("id");

但是有了Vanilla JS你会更好

var c = document.getElementById('system').children[this.value].id;

(小附注:普通JS版本与"#selector>:nth-child("+a+")"相同，这与原始jQuery略有不同，因为它只查看直接的子节点，而jQuery将返回任何恰好是其父节点的第a个子节点的节点。我相信您无论如何都想使用>组合器)

Answer 2

选择器不使用变量，您必须在字符串中使用变量的值：

var c = $("#system :nth-child(" + a + ")").attr('id');

编辑：

如果您要获取的值可能无效，则应在选择器中使用它之前对其进行验证。例如：

$("#inp").blur(function () {
  var a = $(this).val();
  if (/^\d+$/.test(a)) {
    var c = $("#system :nth-child(" + a + ")").attr('id');
    alert(c);
  } else {
    alert("No number entered");
  }
});

演示：http://jsfiddle.net/EYvGE/

此外，不是通过获取元素来获取用于获取元素的id，而是直接获取元素。而不是：

var c = $("#system :nth-child(" + a + ")").attr('id');
var d = $("#" + c);

只需这样做：

var d = $("#system :nth-child(" + a + ")");