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+")"。これは、直接の子ノードのみを参照するという点で元の jQuery とは少し異なりますが、jQuery はたまたま 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 に答える