jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用jQuery和AJAX交换Div内容和CSS大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_4@
我正在尝试使用jQuery& AJAX缩略图div的内容替换div的内容.现在我有一个特色部分,它具有针对h2,h3和p标签的特定样式,以及它的视频.

缩略图与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@
@H_502_4@
@H_502_4@
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

猜你在找的jQuery相关文章

由于是触摸屏,所以需要一款JS虚拟键盘。上网找了一个好用的VirtualKeyboard,作了修改。 修改该插件参考的博客文章:http://www.cnblogs.com/xinggong/arch
HashMap代码(这种实现方式是错误的,错误原因:代码中_map、_length变量是HashMap的所有实例共用的): /** * HashMap * 2021年09月09日 */ (functi
一、引用CSS和JS:View Code二、HTML:View Code三、JS:$(function () { var total = parseInt(&quot;@(ViewBag.total)
JS数字键盘,JS小键盘CSS代码:#numberkeyboard{ border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ma
C.js代码: /** * 有BUG */ (function (global) { var _id; var _map; var _length; global.C = function () {
一、节点模糊搜索功能:搜索成功后,自动高亮显示并定位、展开搜索到的节点。二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。前台代码如下:View Code View Code后台代码(
需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。 前提条件:美工把静态页面写好 HTML代码: @using Models; @{ List&lt;cm
示例代码: marker.addEventListener(&quot;click&quot;, function(){ if (!window.markerClicked) { window.mar

大佬总结

以上是大佬教程为你收集整理的使用jQuery和AJAX交换Div内容和CSS全部内容,希望文章能够帮你解决使用jQuery和AJAX交换Div内容和CSS所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: