javascript - jQuery 这个父 prev 选择器不工作

Question

我需要隐藏当前图像并显示作为父元素表亲的视频框

我有这个:

<script>
$(document).ready(function(){
	$("#preview-box-playvideo-btn").click(function(){
		$(this).closest("#preview-box-img").css("display","none");
		$(this).closest("#preview-box-img").prev().fadeIn(600);
	});
});
</script>

<div class="prev-img">
			<div id="preview-box-video">
				<embed id="" width="348" height="196" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allowscriptaccess="always" quality="high" bgcolor="#000000" name="my-video" src="http://www.youtube.com/v/kRyPMsYGb74?enablejsapi=1&version=3&playerapiid=ytplayer&ps=play&vq=large&rel=0&autohide=1&showinfo=0&autoplay=1&authuser=0" type="application/x-shockwave-flash">
				<div id="preview-box-closevideo-btn">X</div>
			</div>
			<div id="preview-box-img">
				<img src="http://www.img3.9minecraft.net/France/Texture-Pack/Atherys-ascended-texture-pack-3.jpg" height="196" width="348">
				<div id="preview-box-playvideo-btn">
					<span>Reproducir video</span>
				</div>
			</div>
		</div>

拜托，我需要帮助，我不明白为什么它不起作用。

Answer 1

您在 html 中使用 id，但随后您像使用类一样使用选择器。我更喜欢使用类，但在你的情况下，给定你的 id 它更简单。

<script>
    $(document).ready(function(){
$("#preview-box-playvideo-btn").click(function(){
    $("#preview-box-img").hide();
    $("#preview-box-video").fadeIn(600);
});

});

当你可以使用ids直接选择元素时(就像你在为按钮分配点击事件时所做的那样)，拥有ids然后遍历dom树是无稽之谈。

如果您通过使用类来做到这一点，那么使用 closest 定位两个元素的包含 div，然后使用 find 从中定位子元素会更安全。