多個屬性選項

我正在製作襯衫畫廊，並且使用選擇按鈕我只能顯示具有特定顏色的襯衫（如果用戶選擇綠色，我只顯示其中有綠色的襯衫）。多個屬性選項

<div id="fancybox-thumbs"> 
    <ul> 
     <li class="shirt" color="green"><a class="fancybox-buttons" data-fancybox-group="button" href="images/Slike/Majice/VEM/Logo/DSC_0126-logo.jpg"><img src="images/Slike/Majice/VEM/Logo/DSC_0126-thumb.jpg" alt="" /></a></li> 

     <li class="shirt" color="blue"><a class="fancybox-buttons" data-fancybox-group="button" href="images/Slike/Majice/VEM/Logo/DSC_0128-logo.jpg"><img src="images/Slike/Majice/VEM/Logo/DSC_0128-thumb.jpg" alt="" /></a></li> 

     <li class="shirt" color="yellow"><a class="fancybox-buttons" data-fancybox-group="button" href="images/Slike/Majice/VEM/Logo/DSC_0130-logo.jpg"><img src="images/Slike/Majice/VEM/Logo/DSC_0130-thumb.jpg" alt="" /></a></li> 

    </ul></div>

我的問題是，是否有可能我設置的「禮」，讓我們說綠色和藍色之一的顏色標籤，然後表現出來，如果綠色或藍色從選擇按鈕選擇？

這裏是jQuery代碼：

$('document').ready(function() { 

    $('#colorForm').change(function() { 

     var selectedColor = $('#colorForm option:selected').val(); 

     if(selectedColor == 'all') { 
      $('li.shirt').show(1000); 
     } else { 
      $('li.shirt[color*="'+selectedColor+'"]').show(1000); 
      $('li.shirt[color!="'+selectedColor+'"]').hide(1000); 
     } 

    }); 

});

謝謝您的幫助！

來源

2013-11-23 AlesSvetina

數據屬性似乎更approriate（更有效）

<li class="shirt" data-color="green">

然後

$(document).ready(function() { 
    $('#colorForm').on('change', function() { 
     var selectedColor = this.value; 

     if (selectedColor == 'all') { 
      $('li.shirt').show(1000); 
     } else { 
      $('li.shirt').each(function(_,li) { 
       var flag = $.inArray(selectedColor, $(li).data('color').split(/\s+/)) != -1; 
       $(li)[flag ? 'show':'hide'](1000); 
      }); 
     } 
    }).trigger('change'); 
});

FIDDLE

來源

2013-11-23 23:20:35 adeneo

這工作很好。非常感謝您的親切先生。你能簡單地解釋一下「else」語句中的代碼是做什麼的？ – AlesSvetina

它遍歷LI元素，檢查select中的值是否存在於data屬性中，並相應地顯示或隱藏。 – adeneo

噢好吧，非常好。這可能有點牽強附會的問題，但我如何更改fancybox代碼，然後滾動選擇的顏色？因爲現在當我點擊圖片放大圖片時，它仍會滾動瀏覽所有圖片，而不僅僅是我選擇的顏色。謝謝 – AlesSvetina

絕對。你只需要一點聰明。

讓你的元素是這樣的：

<li class="shirt" color="green blue"> ... </li>

然後，你的jQuery改成這樣：

$('li.shirt').hide(1000); 
$('li.shirt[color~=green]').stop().show(1000);

的~=屬性選擇器是一種像類是如何工作的。你有幾個詞，用空格分開，~=尋找一個這樣的詞。

來源

2013-11-23 23:10:48

謝謝你的評論。我是jQuery的新手，我不確定tu是如何構建你所說的這個選擇器的。你能幫我嗎？ – AlesSvetina

好吧，現在你有'selectedColor'變量。只需將其拼接在硬編碼的位置即可。像'$（「li.shirt [color_ =」+ selectedColor +「]」）'''應該這樣做。 –

多個屬性選項

回答

相關問題