Question

我做了一些代码，当用户点击高亮显示选择的图像时，会在图像周围创建一个红色边框。但是我希望在对另一个图像进行新的单击之前擦除所有图像周围的前边框或所有边框。我的问题是如何在单击时激活对函数的调用以及函数在jQuery中的外观如何？我只是想用.css来改变边界，或者改变图像的id？我可以将常见的javascript与jQuery混合使用，还是应该只是脚本中的纯jQuery代码？

这是代码的简化部分，它包含"minibild_1"到"minibild_5"

$(document).ready(function(){

$("#minibild_1").click(function(){
    $("#minibild_1").css({"border":"2px solid #D00C33"});
    $("#storbild").attr("src","../bilder/bilder_stora/{$row1->bild_1}.jpg");  
});

$("#minibild_2").click(function(){
    $("#minibild_2").css({"border":"2px solid #D00C33"});
    $("#storbild").attr("src","../bilder/bilder_stora/{$row1->bild_2}.jpg");   
});
});

Answer 1

jQuery方便地使用类来识别网页上的多个元素。不是分配ID，而是指定要应用特定规则的类，例如单击它会更改其边框。

要激活它，您只需拨打电话即可 $('.insertclasshere').click(function() { $('.insertclasshere').css('border-style', 'dotted'); });

如果要删除该类以便不再激活，只需调用removeClass（'insertclasshere'）。

Answer 2

从JavaScript方面来说，你可以这样做：

$(document).ready(function() {
    for(var i = 1; i <= 5; i++) {
        $('#minibild_' + i).click(function(){
            $(this).css({"border":"2px solid #D00C33"});
            $("#storbild").attr("src","../bilder/bilder_stora/{$row1->bild_1}.jpg");  
        });
    }
});

请注意i函数中未使用click() - 如果需要，您必须使用另一个闭包来使其工作。

但是，由于您使用的是PHP（？）后端的东西，除非您将$row1->bild_1 .. $row1->bild_5放入JavaScript中可用的数组中，否则执行JS循环可能无效。

Answer 3

尝试

<style type="text/css"?
.redBorder { border:2px solid #D00C33 }
</style>
<script>
$(document).ready(function() {
for(var i = 1; i <= 5; i++) {
$("#minibild_1").click(function(){
    $('#minibild_'+i).toggleClass(redBorder);
    $('#storbild').attr('src','../bilder/bilder_stora/{$row1->bild_}'+i+'.jpg');  
});
});
</script>

Answer 4

我假设你想要一些像小缩略图的东西，当用户点击缩略图时，它会突出显示另一个更大的图像将被更改为显示图像的“完整尺寸”，对吗？

现场演示： http://jsfiddle.net/GkUAF/1/

标记大图

<img id="bigpicture" src="..."/>

将缩略图图像封装为“假”链接，并使用“缩略图”等css类标记这些链接

<a href="url_to_bigpicture_1.jpg" class="thumbnail">
  <img id="minibild_1" src="..."/>
</a>

在这种情况下，使用css类而不是更改css，你可以使用一个名为“selected”的css类，如下所示：

/* important: the selected class will be applied on the link but sets the style for 
   the image inside the link!
*/

.selected img {
  border: 2px solid #D00C33;
}

现在为所有这些缩略图链接添加onclick事件

$(document).ready(function() {

  $('a.thumbnail').click(function() {
    // check if this image is already selected
    if($(this).hasClass('selected')) {
      return false;
    }

    // url to large image
    url_big = $(this).attr('href');

    // unselect all previous selected images
    $('a.thumbnail.selected').removeClass('selected');

    // set this one as selected
    $(this).addClass('selected')

    // change big picture with ID #bigpicture !
    $('#bigpicture').attr('src', url_big);

    // prevent change of site
    return false;

  });

});

为运行for循环的函数创建一个函数？

4 个答案: