Question

我是编程新手。当我试图运行下面的代码时，我希望显示id =“3”的图像。取而代之的是，id =“5”的图像正在显示。我认为这是根本的，但无法弄清楚出了什么问题。有什么建议吗？

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-cookie-master/src/jquery.cookie.js"></script>

<style type="text/css">
    .frame {
    height: 368px;
    width: 245px;
    position: absolute;
    float: left;
    margin-top: 0px;
    top: 50px;
    left: 16px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #FFF;
    border-right-color: #C0C;
    border-bottom-color: #C0C;
    border-left-color: #C0C;
}
</style>

<script>
function slider(){  
    $('#3').show();
    };    
</script>


</head>

<body  onload="slider()">


<div class="frame">
    <img id="1" src="images/slideshow/device1.png" alt="" style="position:absolute"/>
    <img id="2 "src="images/slideshow/device2.png" alt="" style="position:absolute"/>
     <img id="3" src="images/slideshow/device3.png" alt="" style="position:absolute"/>
    <img id="4" src="images/slideshow/device4.png" alt="" style="position:absolute"/>
    <img id="5" src="images/slideshow/device5.png" alt="" style="position:absolute"/>


</div>    
</body>
</html>

Answer 1

你只是错过了jquery选择器中的空间，你的选择器意味着带有类框架＆amp;＆amp;的元素。 id 3.你必须这样写。

$（＆＃39; .frame＃3＆＃39;）。show（）; 要么 $（＆＃39; .frame＆＃39）。发现（＆＃39;＃3＆＃39）。显示（）;

Answer 2

我认为你应该分开选择者：

$('.frame #3').show();

修改

或者只使用ID，因为它们必须是唯一的

$('#3').show();

Answer 3

嗯，你并没有隐藏其他元素。它们都显示出来，但绝对位于彼此之上。只需使用以下CSS为您的图片添加display:none：

.frame img {
  display: none;
}

注意： jQuery 3.0 alpha1的changed the behavior为.show()，此方法无法使用遵循新逻辑的jQuery版本。

您可以在下面的代码段中看到这一点。

＆＃13;

$('#3').show();

＆＃13;

.frame {
    height: 368px;
    width: 245px;
    position: absolute;
    float: left;
    margin-top: 0px;
    top: 50px;
    left: 16px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #FFF;
    border-right-color: #C0C;
    border-bottom-color: #C0C;
    border-left-color: #C0C;
}

.frame img {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="frame">
    <img id="1" src="images/slideshow/device1.png" alt="" style="position:absolute"/>
    <img id="2 "src="images/slideshow/device2.png" alt="" style="position:absolute"/>
     <img id="3" src="images/slideshow/device3.png" alt="" style="position:absolute"/>
    <img id="4" src="images/slideshow/device4.png" alt="" style="position:absolute"/>
    <img id="5" src="images/slideshow/device5.png" alt="" style="position:absolute"/>
</div>

＆＃13;

Answer 4

你可以使用这个显示第3张图像，因为你已经使用了绝对的图像位置所以所有图像都显示在页面上但是其他图像隐藏在图像5后面。你需要添加jquery cdn库...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js" ></script>

使用此功能，您可以看到第3张图片......

<script>
function slider(){  
    $("#1,#2,#4,#5").hide();
    $('#3').show();   
    };    
</script>

html / jquery显示的图像与预期不同

4 个答案: