如何获得img的ID，然后用它来改变DIV的内容

好的，所以我有一系列的图像，当点击时会改变与该图像的ALT文本的DIV的内容。下面是觉得─如何获得img的ID，然后用它来改变DIV的内容

$(function() { 
    $('#dalton').click(function() { 
    var alt = $(this).attr('alt'); 
    $('.article_desc').html(alt); 
    }); 

    $('#rutherford').click(function() { 
    var alt = $(this).attr('alt'); 
    $('.article_desc').html(alt); 
    }); 

});

的代码，我有这个工作得很好，但问题是，如果我在页面内的几个图片，我怎么可以优化代码，所以我不必重复它为每个图像？

我想过一个变量设置为图像ID-

$(function() { 
$('img').click(function() { 
var imgid = this.id;

但我不知道怎样才能嫁给两个在一起。

编辑：这里是该节的HTML：

<section class="section1"> 
 
    <article> 
 
    <ul> 
 
    <li><img src="plumpudding.gif" id="dalton" alt="Lorem ipsum dolor sit amet"></li> 
 
    \t <li><img src="rutherford.png" id="rutherford" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li><img src="bohr.gif" id="bohr" alt="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi"></li> 
 
    </ul> 
 
    <div class="clearfix"></div> \t \t 
 
    <div class="article_desc" id="article_desc">Click on the picture for description.</div> 
 
    </article> 
 
</section>

来源

2016-12-14 Chad Scott

jquery的每个函数。？ – Mahi

只需将一个类添加到您的图像中，然后将其绑定该点击事件 – Eric

有多种方法可以解决这个问题。你可以发布一个你的HTML样本吗？... – War10ck

在这里做一个命名函数可能会有帮助。

$(function() { 
    $("#dalton").click(setDescriptionToAlt); 
    $('#rutherford').click(setDescriptionToAlt); 

    // OR use a class given to each element. 

    $(".image-with-alt").click(setDescriptionToAlt); 
}); 

function setDescriptionToAlt() { 
    var alt = $(this).attr("alt"); 
    $(".article_desc").html(alt); 
}

由于具有命名的功能，你只需要引用它，而不是每次都复制联匿名函数。从那里你可以决定为你需要的每个元素id做一个点击事件，或者你可以给每个元素分配一个类来受影响，并用它来代替。

来源

2016-12-14 16:15:29 Shelby115

谢谢！我给每个img分配了一个“image-with-alt”类，并用你给的东西替换了这个脚本，这太棒了！谢谢！ –

-1

相反的元素ID的使用类名

$('.image').click(function() { 
    var alt = $(this).attr('alt'); 
    $('.article_desc').html(alt); 
});

来源

2016-12-14 15:51:46

解释会有用吗？ – Liam

试试这个....所以这你可以得到所有点击图片alt信息。注意所有img标签必须有class='image'并为要显示alt信息的文本区域id= 'article_desc'定义id。

$('.image').click(function() { 
    var alt = $(this).attr('alt'); 
    $('#article_desc').append(alt); 
});

来源

2016-12-14 15:56:52

如何获得img的ID，然后用它来改变DIV的内容

回答

相关问题