Question

我对jquery有点新意，但我对它有所了解。但到目前为止，这是相当简单的jquery。

但我正在尝试编写一段更具动态性的代码

功能：我希望代码能够在不同时间隐藏图片。像2000毫秒后的一张图片，然后是4000毫秒后的下一张图片。但我仍然不确定一些事情......

这就是我的尝试：

<div class="twelve columns" style="padding-top: 24px; text-align:center;">
    <div>
        <img id="1" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
        <img id="2" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
        <img id="3" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
        <img id="4" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
        <img id="5" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
    </div>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/4mdQgvGrhwU" frameborder="0" allowfullscreen></iframe>
    <hr>

    <a href="{{ URL::previous()}}">
        <button>Go Back</button>
    </a>
</div>
</div>
<!-- Row End-->
</div>
</div>
<script>
    var starNumber = 5;
    var star = function() {
        $("#".starNumber).hide("slow");
        starNumber = starNumber - 1;
    };

    setTimeout(star, 2000);
    setTimeout(star, 4000);
    setTimeout(star, 6000);
    setTimeout(star, 8000);
    setTimeout(star, 10000);
</script>

我认为问题的根源在于：

var starNumber = 5;
var star = function() {
   $("#" .starNumber).hide("slow");

我可以拨打$（“＃”。starNumber）吗？我也试过$（“＃”starNumber）但是没有用。我该怎么做？

Answer 1

在你的选择器$("#" .starNumber)中，你没有传递一个有效的字符串（jQuery可能会解析它以创建适当的jQuery对象）。如果您尝试选择ID为“5”的元素，则必须将字符串“＃5”传递给$。

知道所需的表格是$("#5")，在这种情况下最简单的选择是更改有问题的行：

// This is syntactically incorrect as you are passing an "#" and
//     the "starNumber" property of... nothing
$("#" .starNumber).hide("slow");

为：

// This is syntactically CORRECT, as you are concatenating an "#"
//     with the value contained in the "starNumber" variable
$("#" + starNumber).hide("slow");

Answer 2

首先，你的选择器必须是$('#' + starNumber)，因为JS字符串连接是用+完成的。

如果您需要可重复使用的功能，可以使用以下内容：

var starNumber = 0, timer, offset = 2000;
var star = function () {
    if ( starNumber == 5 ) {
        clearTimeout(timer);
        starNumber = 0;
        return;
    } 
    setTimeout(function () {
        $("#" + starNumber).hide("slow");
        star();
    }, offset * ++starNumber);
};
star();

jQuery的。如何重用各种元素的函数

2 个答案: