Question

jquery 如何选取相同class里特定的一个?

假设js代码如下
$(".item_content").hover(
function(){
$(".post_status").removeClass("hidden").addClass("appear");
},
function(){
$(".post_status").removeClass("appear").addClass("hidden");
}
);
html里面有n个item_content,如果用上面的js代码的话，hover任意一个item_content就会把所有的item_content都执行上面的那段代码。如何使仅当前hover的那一个item_content调用上面的方法，而其他item_content不受影响？
<div class="item_content">
。。。。

</div>

Answer 1

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填充问题基础代码。

2、在index.html中的<script>标签，将“$(".post_status")”修改为“$(this).find(".post_status")”。

3、浏览器运行index.html页面，此时对任意个div进行hover都只会是当前hover的元素会调用样式改变代码。

Answer 2

可以使用jquery的this实现选取相同class里特定的一个。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件，js文件。

2、在ue编辑器中输入以下html代码。

3、在ue编辑器中输入以下js代码。

4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

5、在浏览器中打开此html文件，可以看到最终想要实现的选取相同class里特定的一个效果。

Answer 3

可以使用$(this)方法;
语法:$(this).removeClass("appear").addClass("hidden");

why?
因为$(".item_content").hover()意思是为类名为item_content的元素绑定一个鼠标经过事件.

当鼠标经过某一个item_content元素时,我们可以理解为,一个指针正指向这个元素,而$(this)便会直接返回这个指针指向的对象. 所以就不会与其他同名对象冲突.

Answer 4

你好!

$(".item_content").hover(
    function(){      
      $(this).removeClass("hidden").addClass("appear");
    },
    function(){
    $(this).removeClass("appear").addClass("hidden");
    }
);

试试··

追问

你好，不是item_content要执行function，而是item_content里面的span子元素.post_status要执行，请问怎么改？

追答

$(".item_content").hover(
    function(){      
      $(this).children(".post_status").removeClass("hidden").addClass("appear");
    },
    function(){
    $(this).children(".post_status").removeClass("appear").addClass("hidden");
    }
);

Answer 5

把每个item_content加上class属性，然后写上对应的function语句