Jquery 按多值更改图像

我使用

span

标记创建了一个HTML列表。我想将顶部图像的SRC改为'image/'前缀，后缀取自数据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>

劳顾会,；黑纱


弗兰博西耶酒店


l'opé；类风湿关节炎


勒弗兰自然酒店


勒米尔费耶斯酒店


l′é；clair au chocolat ou café；


塔廷酒店


勒巴巴乌拉姆酒店


法兰博伊斯金融家酒店


塔尔特酒店


l'ile flottanteà；拉格拉维；我

首先，不能将

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);
});

---

由于我这边不断的干扰，帕帕拉佐基德比我早到这里。然而，由于我一直在工作，因为它是张贴我会张贴我想出了什么

正如PapparazzoKid提到的，不能有两个（或更多）具有相同ID属性值的元素。这就是类的用途——只需使用类即可

我还更改了

alt

属性，以便您可以在小提琴中看到更改。还要注意的是，我将您的所有ID都更改为

class=“hoverClass”

。代码的其余部分保持原样

下面是一个完整的工作示例，说明您的请求

---

如果我想把它添加到Joomla中，谢谢你。URL会是什么？只需稍加修改即可更新，请看，其中的共识是“不，他们不应该”！

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
    }
);