Question

我的代码 -

<td>                    
<p align="justify" id="prodetail"><img src="images/PostQuote.png" id="protext">Airspot recently realeases a revolutionary wireless router that can help your WiFi router go social.<br> <a href="linkpage.htm" align="right">more...</a></p>
</td>

我有一些关于链接鼠标的链接我正在更改内部文本和图像但问题是文本正在改变但图像得到disappear。 jquery代码 -

<script>
$('a#a1').bind('mouseover', function() {
    $('img#protext').attr("src", "images/PostQuote1.png");
    $('p#prodetail').text("In the INSPIRE series of products, we bring you a slew of an edutainment products with a a vision for delivering education through story telling and immersion paradigms through animation films and video classroom recordings.");
    });
$('a#a2').bind('mouseover', function() {
    $('img#protext').attr("src", "images/PostQuote2.png");
    $('p#prodetail').text("In the ASPIRE class of products, we offer a wide variety of video class room sessions. We are offering over 60 hours of video content dealing with topics related to Speed Mathematics [ Vedic and Trachtenberg Systems of Speed Math ], Basic Mathematics for Grade 1 to 7 [ covers all the 100+ topics on Arithmetic]");
    });
$('a#a3').bind('mouseover', function() {
    $('img#protext').attr("src", "images/PostQuote3.png");
    $('p#prodetail').text("Our motivation is very simple. We wanted to offer the student a sound conceptual understanding a foundation. For doing this we have no re-invented the wheel. We have re-engineered it. We have relied on the great works of Masters and Gurus.");
    });
</script>

Answer 1

我认为你只需要更好地构建你的HTML：

HTML

<td>
<p id="prodetail"><img src="images/PostQuote.png" id="protext" /><span>Airspot recently realeases a revolutionary wireless router that can help your WiFi router go social.</span><br /><a href="linkpage.htm">more...</a></p>
</td>

CSS

#prodetail { text-align: justify; }
#prodetail a { text-align: right; }

js

$('#a1').bind('mouseover', function() {
    $('#protext').attr("src", "images/PostQuote1.png");
    $('#prodetail > span').text("In the INSPIRE series of products, we bring you a slew of an edutainment products with a a vision for delivering education through story telling and immersion paradigms through animation films and video classroom recordings.");
    });
$('#a2').bind('mouseover', function() {
    $('#protext').attr("src", "images/PostQuote2.png");
    $('#prodetail > span').text("In the ASPIRE class of products, we offer a wide variety of video class room sessions. We are offering over 60 hours of video content dealing with topics related to Speed Mathematics [ Vedic and Trachtenberg Systems of Speed Math ], Basic Mathematics for Grade 1 to 7 [ covers all the 100+ topics on Arithmetic]");
    });
$('#a3').bind('mouseover', function() {
    $('#protext').attr("src", "images/PostQuote3.png");
    $('#prodetail > span').text("Our motivation is very simple. We wanted to offer the student a sound conceptual understanding a foundation. For doing this we have no re-invented the wheel. We have re-engineered it. We have relied on the great works of Masters and Gurus.");
    });

您的图片消失的原因是.text()替换了您对新文字的所有内容。

我希望新代码有帮助

如何通过jquery </p>更改鼠标上的<p>标签内的图像

1 个答案: