帮助 jquery 图像库

Question

我正在为我的网站创建一个投资组合图片库，但我遇到了一些麻烦......当我点击其中一个图标时，第一张图片会消失（假设会发生）但下一张图片不会打开......

这是我的代码：

$(".portlink").click(function() {
    $(".large-image").addClass("hidden");

    var $alt = $(this).attr("alt");

    $(".", $alt).removeClass("hidden");
})

还有我的 html/php...

    function portfolio() {
    $sql = "SELECT * FROM db ORDER BY id DESC";
    $res = mysql_query($sql) or die(mysql_error());

    while($row = mysql_fetch_assoc($res)) {
    ?>

        <div id="large-image" class="<?php echo $row['name'] ?> large-image hidden">
            <a href="<?php echo $row['website_address'] ?>"><img src="img/uploads/<?php echo $row['website_image'] ?>" alt="" /></a>
        </div>
    <?php
    }
} // End portfolio

function portfolio_nav() {
    $sql = "SELECT * FROM db ORDER BY id DESC";
    $res = mysql_query($sql) or die(mysql_error());

    while($row = mysql_fetch_assoc($res)) {
    ?>
        <div class="workbox"> 
            <div class="background pngfix"> 
                 <a class="portlink" alt="<?php echo $row['name'] ?>" href="#"><img src="img/uploads/<?php echo $row['website_image'] ?>" alt="" /></a>
            </div>  
        </div> 
    <?php
    }
} // End portfolio

请帮忙！！

谢谢本

Answer 1

顺便说一句，您不应该有多个具有相同 id 的元素（所有 div 都具有“大图像”作为 id）。

我认为您的 jQuery 应该如下所示：

$(".portlink").click(function() {
    $(".large-image").addClass("hidden");

    var alt = $(this).attr("alt");

    $("." + alt).removeClass("hidden");
})

（在最后一行使用 '+' 而不是 ','）。

如果这不起作用，请检查 $row['name'] 是否是您期望的字符串。

Answer 2

是的，严格来说，每个 HTML 元素理想情况下都应该有一个唯一的 ID。

您可能可以为 ID 添加一个计数器，因此名称将是“large-image-1”、“large-image-2”等，当然，也可以为 JavaScript/jQuery function 传递计数器。

干杯。