Question

我对html和jquery有疑问。我正在使用blogspot平台，我想使用＆＃34; Image Widget＆＃34;创建幻灯片。在下面添加3个图像小部件后的代码结果。元素为<h2>为标题，<a href>为img锚点，然后为标题。

<div class="sidebar section" id="faux">

<h2>Slide 1</h2>

<a href="#">
<img alt="Slide 1" height="540" id="Image1_img" src="images/slide1.jpg" width="960">
</a>
<span class="caption">slideInLeft</span>


<h2>Slide 2</h2>
<a href="#">
<img alt="Slide 2" height="540" id="Image2_img" src="images/slide2.jpg" width="960">
</a>
<span class="caption">slideInRight</span>


<h2>Slide 3</h2>
<a href="#">
<img alt="Slide 3" height="540" id="Image3_img" src="images/slide3.jpg" width="960">
</a>
<span class="caption">slideInTop</span>

</div>

我计划使用Nivo滑块，然后我读到nivo滑块标记为：

<div id="slider" class="nivoSlider">

<a href="#"><img src="images/slide1.jpg" alt="" title="Slide 1" data-transition="slideInLeft" /></a>
<a href="#"><img src="images/slide2.jpg" alt="" title="Slide 2" data-transition="slideInRight" /></a>
<a href="#"><img src="images/slide3.jpg" alt="" title="Slide 3" data-transition="slideInTop" /></a>

</div>

我的问题是：
1.是否可以将<span class="caption">slideInLeft</span>更改为data-transition="slideInLeft"然后将其附加到<img>元素？
2.在同一情况下，我想将<h2>Slide 1</h2>更改为title="Slide 1"，然后将其附加到<img>元素...

提前致谢，对不起我的英语：）

Answer 1

in plain javascript：

var attribute = document.getElementById('attribute').getAttribute('data-transition');
var spans = document.getElementsByClassName('caption').setAttribute('data-transition', attribute);
var img = document.getElementsByTagName('img');
img.innerHTML = img.innerHTML + spans;

其中有一个id属性包含数据转换属性的元素

Answer 2

根据我的理解，我有javascript代码给你我们这个javascript正在加载

$(document).ready(function(){
$("#faux img").each(function(){
    $(this).attr("data-transition" ,$(this).parent().next(".caption").html());
$(this).attr("title" ,$(this).parent().prev("h2").html());
    $(this).parent().next(".caption").remove();
    $(this).parent().prev("h2").remove();
});

});

转换元素然后将其附加到另一个父元素？

2 个答案: