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

}）; 我必须使用这个函数来相应地替换它们的偶数和奇数状态。我已经工作了很长时间而且我被卡住了。我该怎么做？该功能隐藏了下一个或前一个的瓷砖。

Answer 1

是的，但您需要插入a变量：

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

但是使用Vanilla JS

你会好得多

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

（小方注意：vanilla JS版本与"#selector>:nth-child("+a+")"相同，它与原始jQuery略有不同，因为它只查看直接子节点，而你的jQuery将返回任何节点恰好是其父母的第一个孩子的那条线。我相信你实际上想要使用>组合器。

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 + ")");

我可以在nth-child中使用value来调用元素的id吗？

2 个答案:

编辑：