如何使用輸入表單和jquery按類別過濾圖像？

我那裏有4張圖片

<img src="1" /> 

<img src="2" /> 

<img src="3" /> 

<img src="4" /> 

Filter: 
<form> 
<input type="checkbox" name="gallery" value="abstract" /> Abstract<br /> 
<input type="checkbox" name="gallery" value="landscape" /> Landscape 
</form>

頁如何添加一些標記，每幅圖像是某一類的一部分，然後使用複選框以jquery .hide()過濾它們？我不喜歡使用class屬性。非常感謝您的幫助！

來源

2011-07-22 Grozav Alex Ioan

'我寧願不使用類attribute.'爲什麼不呢？ – StuperUser

因此，像1和4可能是景觀類別，2和3可能是抽象的？ –

您可以使用圖像寬度和高度來確定它們的方向。orientation =（width> height）？ '風景'：'抽象'.. – Johan

對於類型添加某一類（即使你不想......）

$('input[value="landscape"]').click(function(){ 
    $('.landClass').toggle(); 
}); 

$('input[value="abstract"]').click(function(){ 
    $('.absClass').toggle(); 
});

小提琴：http://jsfiddle.net/maniator/3bk22/

來源

2011-07-22 15:55:24 Neal

謝謝！這將起作用 –

你不是說你不想使用類屬性嗎？！ –

@Steve但有沒有更好的辦法^ _^ – Neal

您可以使用IMG的屬性ALT

<img src="1" alt="abstract"/>

和jquery：

$(document).ready(function(){ 
    $('input[name="abstract"]').click(function(){ 
     $('img[alt="abstract"]').toggle(); 
}) 

    $('input[name="landscape"]').click(function(){ 
     $('img[alt="abstract"]').toggle(); 
}) 

});

來源

2011-07-22 15:58:14

那麼多的圖像可以有相同的ALT標籤 - 那不是總是一件好事.... – Neal

確定使用title屬性，而不是ALT :) –

試試這個

<div id="abstract"> 
    <img src="1" /> 

    <img src="2" /> 
</div> 

<div id="landscape"> 
    <img src="3" /> 

    <img src="4" /> 
</div> 

$("input:checkbox").click(function(){ 
    $("#abstract, #landscape").hide(); 
    if($(this).is(":checked")){ 
    $("#"+$(this).val()).show(); 
    } 
});

來源

2011-07-22 15:59:31 ShankarSangoli

這是假設圖像**不是**都混在一起。 – Neal

是的，該問題表示添加所需的標記而不添加任何類屬性。 – ShankarSangoli

看看我的小提琴。用你的方式，圖像可以**不會像這樣混合...... – Neal

試試這個： http://jsfiddle.net/shaneburgess/wTkR5/6/

$(document).ready(function(){ 

    $("#abstractCheck").change(function(){ 
     $(".abstract").toggle(); 
    }); 

    $("#landScapeCheck").change(function(){ 
     $(".landscape").toggle(); 
    }); 

});

HTML：

來源

2011-07-22 16:02:39 shaneburgess

你的小提琴根本不符合你的答案 – Neal

對不起，錯誤的版本，更新 – shaneburgess

？什麼與DOM的變化？ – Neal

如何使用輸入表單和jquery按類別過濾圖像？

回答

相關問題