jQuery如果長名單或？

我有大約15個圖像的鏈接。每張圖片都有一個標題和alt標記。點擊時，每個圖像顯示與被點擊的圖像相關聯的另一圖像和描述。我目前正在這樣做，它的工作原理。它在div＃me-dsc中顯示正確的描述，在＃me-d中顯示圖像，但是我想知道是否有更好的方法，而不是使用15個if語句？jQuery如果長名單或？

$('a.linkhover').on('click',function (event){ 
    event.preventDefault();  
    var titleTxt = $(this).find('img').attr('title'); 

    if (titleTxt == 'Pies') 
    { 
     $('#me-dsc').html('Shoes'); 
     $('#me-give').html('<img src="assets/images/shoes.svg" alt="'+ titleTxt +'" >'); 
    } 

    else if (titleTxt == 'Car') 
    { 
     $('#me-dsc').html('Car'); 
     $('#me-give').html('<img src="assets/images/car.svg" alt="'+ titleTxt +'" >'); 
    } 
});

來源

2014-11-22 Rob

這些圖片之間是否有邏輯聯繫，或者您是否必須知道哪張圖片適合另一張圖片？對於第二種情況，開關可能是更好的選擇 – baao 2014-11-22 07:53:35

你可以存儲在你想從觸發單擊事件，使用HTML5的data-屬性<a>元素的描述，標題文本和圖像源。例如：

<a href="#" class="linkhover" title="Pies" data-desc="Shoes" data-img-src="shoes.svg">Pies</a> 
<a href="#" class="linkhover" title="Car" data-desc="Car" data-img-src="car.svg">Car</a>

爲了您的jQuery，這是相當簡單：

$('a.linkhover').on('click', function (event){ 
    // Prevent default action 
    event.preventDefault(); 

    // Cache $(this) 
    var $this = $(this), 
     title = $this.attr('title'), 
     desc = $this.attr('data-desc'), 
     imgSrc = $this.attr('data-img-src'); 

    // Set HTML 
    $('#me-dsc').html(desc); 
    $('#me-give').html('<img src="assets/images/'+imgSrc+'" alt="'+title+'" >'); 
});

看到，有證據的概念小提琴：http://jsfiddle.net/teddyrised/da2ubvs0/3/

爲了完整起見，你也可以嘗試在jQuery中構建圖像對象，而不是使用純HTML：

var $img = $('<img />', { 
    'src': 'assets/images/'+imgSrc, 
    'alt': title 
}); 
$('#me-give').html($img);

工程一樣好;）http://jsfiddle.net/teddyrised/da2ubvs0/4/

來源

2014-11-22 07:57:55 Terry

尼斯特里。謝謝。這有效，比所有if else語句都好！ Rob – Rob 2014-11-22 11:50:32

在舊版瀏覽器中使用data-desc和data-img-src有什麼問題？ – Rob 2014-11-22 11:51:38

@Rob我不這麼認爲：http://caniuse.com/#feat=dataset。即使IE8有部分支持（不能通過'dataset'訪問，但可能通過'getAttribute'），我認爲這是由jQuery覆蓋:) – Terry 2014-11-22 14:32:36

jQuery如果長名單或？

回答

相關問題