Question

我使用span标签创建了一个HTML列表。我想将顶部图像的SRC更改为`image /＆＃39;前缀和后缀取自data-idName。例如，将鼠标悬停在第一个跨度上会产生：

image/baba-au-rhum1.jpg

请告诉我如何实现这一点。

<div>
    <img id="imgid" src="image/default.jpg" width="300" height="171" alt="Hello">
</div>

<div>
    <p style="text-align: left; margin-top: 60px;">
        <span id="hoverId" data-idName="baba-au-rhum1.jpg">
            <span class="classRed">la</span> for&ecirc;t noire</span>
            <br />
        <span id="hoverId" data-idName="baba-au-rhum2.jpg">
            <span class="classRed">le</span> framboisier</span>
            <br />
        <span id="hoverId" data-idName="baba-au-rhum3.jpg">
            <span class="classRed">l'</span> op&eacute;ra</span>
            <br />
        <span id="hoverId" data-idName="baba-au-rhum4.jpg">
            <span class="classRed">le</span> flan nature</span>
            <br />
        <span id="hoverId" data-idName="baba-au-rhum5.jpg">
            <span class="classRed">le</span> mille feuilles</span>
            <br />
        <span id="hoverId" data-idName="baba-au-rhum6.jpg">
            <span class="classRed">l'</span> &eacute;clair au chocolat ou caf&eacute;</span>
            <br />
        <span id="hoverId" data-idName="baba-au-rhum7.jpg">
            <span class="classRed">la</span> tarte Tatin</span>
            <br />
        <span id="hoverId" data-idName="baba-au-rhum8.jpg">
            <span class="classRed">le</span> baba au rhum</span>
            <br />
        <span id="hoverId" data-idName="baba-au-rhum9.jpg">
            <span class="classRed">le</span> financier a la framboise</span>
            <br />
        <span id="hoverId" data-idName="baba-au-rhum10.jpg">
            <span class="classRed">la</span> tarte aux fraises</span>
            <br />
        <span id="hoverId" data-idName="baba-au-rhum18.jpg">
            <span class="classRed">l'</span> ile flottante &agrave; la cr&egrave;me</span>
    </p>
</div>

Answer 1

首先，您不能将hoverId作为所有span元素的ID。每个元素必须拥有自己的唯一ID，如hover1，hover2，hover3等。

jQuery将是：

$('span[data-idName]').hover(function() {
    var newURL = $(this).attr('data-idName');
    $('img#imgid').attr('src', 'image/' + newURL);
});

Answer 2

由于我身边的不断中断，PapparazzoKid早在我面前就到了这里。但是，自从我发布以来我一直在努力，我将发布我想出的内容。

正如PapparazzoKid所提到的，你不能拥有两个（或更多）具有相同ID属性值的元素。这是什么类 - 只需使用类。

我也进行了alt属性更改，因此您可以看到更改发生在小提琴中。另请注意，我已将您的所有ID更改为class="hoverClass"。你的其余代码是原样的。

以下是您所要求的完整工作示例。

jsFiddle Demo

var tmp;
$('.hoverClass').hover(
    function(){
        //hover IN
        tmp = 'image/' + $(this).attr('data-idName');
//        tmp = 'image/'+ $(this).data("idName");
        $('#imgid').attr('src',tmp).attr('alt',tmp);
    },
    function(){
        //hover OUT
    }
);

通过多值更改图像

2 个答案: