Question

我链接了大约15张图片。每个图像都有一个标题和alt标记。单击时，每个图像显示与单击的图像关联的另一个图像和描述。我目前正在这样做，它的工作原理。它显示了div＃me-dsc中的正确描述和#me-give中的图像，但我想知道是否有更好的方法，而不是使用15 if语句？

$('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 +'" >');
    }
});

Answer 1

您可以使用HTML5的<a>属性将描述，标题文字和图片来源存储在您希望触发点击事件的data-元素中。例如：

<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/

jQuery if语句长列表还是？

1 个答案: