jQuery img rel在另一個區域的文本位置

我想弄清楚如何使用jquery拍攝一個活動類的圖像，將「rel」數據應用到另一個div中的文本與h2標籤。我對jQuery非常陌生，仍然試圖圍繞它進行思考。請解釋一下發生了什麼，所以它是有道理的！提前謝謝您的答案！jQuery img rel在另一個區域的文本位置

我能弄清楚的是：

的jQuery（我知道我需要這個......只是不知道如何使用它）

var title = $("#slider img.active").attr("rel");

的HTML：

<div id="slider"> 
    <div id="sliderimgholder"> 
     <img class="active" src="images/slider-1.jpg" alt="" rel="image one" /> 
     <img class="" src="images/slider-2.jpg" alt="" rel="image two" /> 
     <img class="" src="images/slider-3.jpg" alt="" rel="image three" /> 
    </div> 

    <div id="ribbon"> 
     <h2>THIS SHOULD BE POPULATED WITH text image one</h2> 
    </div> 
</div>

來源

2012-02-19 remixdesign

是否有任何發佈的答案適合您，或者您是否還有其他問題..？ – 2012-02-20 22:27:28

退房的text功能：

var title = $("#slider img.active").attr("rel"); 

$("#ribbon h2").text(title);

實施例：http://jsfiddle.net/eYPW4/

來源

2012-02-19 22:15:20

可以使用text方法來設置一個元素的文本內容。你只需要選擇合適的元素，你可以用一個簡單的選擇做：

$("#ribbon h2").text(title);

然而，需要注意的是，這將每一個h2元素是#ribbon後代文本置於是很重要的。在你的問題的例子中，這不會是一個問題，因爲只有一個問題，但值得記住的是萬一發生了變化。

另請注意，如果要將任意數據存儲在元素上，則可以使用HTML5 data-*屬性，因此不需要查找其他屬性，如rel。

來源

2012-02-19 22:15:36

這是如何難以擴大它與圖像推子一起使用..因此，sliderimgholder內的圖像淡入和淡出功能並更新h2？ – remixdesign 2012-02-20 00:22:03

@ user1204678 - 不難。查看jQuery文檔中的'fadeIn'和'fadeOut'方法。 – 2012-02-20 06:56:59

我建議：

$('#sliderimgholder img').click(
    function(){ 
     $('#ribbon h2').text($(this).attr('rel')); 
    });

JS Fiddle demo。

稍作修改，以避免創建text()方法內部的jQuery對象：

$('#sliderimgholder img').click(
    function(){ 
     $('#ribbon h2').text(this.getAttribute('rel')); 
    });

JS Fiddle demo。

來源

2012-02-19 22:23:39

jQuery img rel在另一個區域的文本位置

回答

相關問題