大佬教程收集整理的这篇文章主要介绍了使用jQuery和AJAX交换Div内容和CSS,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
缩略图与h2,h3,p标签和视频具有相同的标记,但每个都有自己特定的css样式.
我要做的是点击其中一个缩略图,它用缩略图的信息替换功能部分,然后将特色部分放在缩略图中.
我有点开始,但我似乎无法删除并添加类到特定的缩略图,而不实际更改下面的缩略图的CSS.
任何帮助将不胜感激.
我已经创建了一个jsfiddle与我目前的设置和我到目前为止.
http://jsfiddle.net/drewbietron/YstAQ/
$(document).ready(function(){ $("#one.promo-item").click(function(e){ e.preventDefault(); var content = $(this).html(); $('.video-container-featured').replaceWith('<div class="video-container-promo" id="one">' +content+ '</div>'),$('#one.video-container-promo').addClass('.video-container-featured'); }); });
谢谢!
@H_502_4@
你有这个:
<div class="promo-item" id="one"> <div class="video-container-promo" id="one"><iframe src="#"></iframe></div> <h2>title...</h2> [...]
如上所述,you can’t have duplicate ids.但即使你可以,嵌套的id =“one”也完全是多余的.您可以使用#one .video-container-promo定位该元素.同样,您可以通过使用#one启动css选择器来定位任何嵌套的子级. (顺便说一下,数字索引的项目可以在jQuery中使用eq()method进行访问,不需要混淆你的标记.)
一旦你清理了你的html,你的jQuery代码基本上可以成为一个单行.要使用单击的div的内容替换一个div的内容,只需执行以下操作:
$('.source').click(function(){ $('#target').children().replaceWith($(this).clone().children()); });
根据您的示例,目标应该是id.唯一的另一个考虑因素是确保你正在投掷的元素heirarchies匹配.
这是一个简单的jsfiddle,展示了它是如何工作的:http://jsfiddle.net/joemaller/qxUvp/
@H_502_4@ @H_502_4@以上是大佬教程为你收集整理的使用jQuery和AJAX交换Div内容和CSS全部内容,希望文章能够帮你解决使用jQuery和AJAX交换Div内容和CSS所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。