0

这是问题：我有一个通过 .load( 加载到我页面上的 div 上的图像列表

$('.widget-top').live("click", function() {
    $(".area").load("/galleries/ #projects > li a");
});

他们用这个结构加载：

<a href="#"><img src="photoA.jpg" /> </a>
<a href="#"><img src="photoB.jpg" /> </a>
<a href="#"><img src="photoC.jpg" /> </a>
<a href="#"><img src="photoD.jpg" /> </a>
<a href="#"><img src="photoE.jpg" /> </a>

我单击图像，然后检索 src 并将其添加到表单值中，如下所示：

$("#widgets-right .area a").live("click", function() {
    $(this).toggleClass('selected');
    if ( i === 2){
        alert('added to project 1 if you want to add more projects just click the button below');
        var title = $(this).attr('title');
        $(".title").val(title);
        var link = $(this).attr('href');
        $(".link").val(link);
        var img = $("img", this).attr('src');
        $(".img").val(img);
        var imgexample = $("img", this).attr('src');
        $(".gallery_one").attr("src", imgexample);
    }
    else{
        i --;
        alert('added to project'+i); 
        var title = $(this).attr('title');
        $('.title'+i).val(title);
        var link = $(this).attr('href');
        $('.link'+i).val(link);
        var img = $('img', this).attr('src');
        $('.img'+i).val(img);
        var imgexample = $('img', this).attr('src');
        $('.gallery_one'+i).attr("src", imgexample);
        i++;
    }
});

从这一行可以看出，$(this).toggleClass('selected');单击它会切换一个类。到这里一切都很好，当我保存我的表单并通过ajax刷新它时会出现我的问题。具有所选类别的图像现在不再具有所选类别，因为它们已被刷新。我确实有输入字段，其中包含页面上所选图像的当前 src。如果输入字段中的 src 与通过 .load() 调用重新加载的图像的 src 匹配，是否有任何方法可以搜索这些字段并重新应用该类？克里斯

4

1 回答 1

1

您需要将当前选定的项目存储在一个变量中，并且在加载图像后，您需要重新分配类

var selected; // it should be in a context shared between both the methods

$("#widgets-right .area a").live("click", function() {
    $(this).toggleClass('selected');
    if ( i === 2){
        alert('added to project 1 if you want to add more projects just click the button below');
        var title = $(this).attr('title');
        $(".title").val(title);
        var link = $(this).attr('href');
        $(".link").val(link);
        var img = $("img", this).attr('src');
        $(".img").val(img);
        selected = img;
        var imgexample = $("img", this).attr('src');
        $(".gallery_one").attr("src", imgexample);

    }   
    else{  
        i --;
        alert('added to project'+i); 
        var title = $(this).attr('title');
        $('.title'+i).val(title);
        var link = $(this).attr('href');
        $('.link'+i).val(link);
        var img = $('img', this).attr('src');
        $('.img'+i).val(img);
        selected = img;
        var imgexample = $('img', this).attr('src');
        $('.gallery_one'+i).attr("src", imgexample);
        i ++;
    }    
});

$('.widget-top').live("click", function() {
    $(".area").load("/galleries/ #projects > li a", function(){
        if(selected){
        $(".area").find('img[src="' + selected + '"]').closest('a').toggleClass('selected');
        }
    });
});
于 2013-07-18T04:53:57.160 回答