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

}); 我必须使用这个函数来相应地替换类的偶数和奇数状态。我已经研究了很长时间，但我被卡住了。我该怎么办？该功能将磁贴隐藏在下一个或上一个。

4

2 回答 2

5

是的，但您需要插入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+")"与'其父母的第一个孩子。我相信你实际上还是想使用>组合器）

于 2013-03-09T19:48:52.967 回答
1

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

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 + ")");
于 2013-03-09T19:50:06.137 回答