时间戳

首页 > 解决方案 > 获取用户输入并提醒图像

javascript - 获取用户输入并提醒图像

问题描述

我正在尝试使用 DOM 找出页面上有多少图像并将其存储到变量中。一旦我发现我想打印出“页面上有 VARIABLE（从变量中获取任何数字）图像”。接下来，会有一个文本框，用户可以在其中输入一个数字，例如 1，当他们单击 Go 按钮时，第一个图像将在另一个页面上弹出（警报）。我不确定我的代码做错了什么，但我很困惑。我知道我需要使用 jQuery 附加按钮和文本框。

我有的

$(document).ready(function() {
var image = $(.img).length;
  $(".numImg").click(function() {
    alert("");
  });
});

完整代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script>
    $(document).ready(function() {
      $('img').attr('height','50px').attr('width','50px'); //make all images 50x50 pixels

    }); //end ready()

   $(document).ready(function() {
    var image = $(".img").length;
      $(".numImg").click(function() {
        alert("");
      });
    });

    </script>
    </head>

    <body>
    <div id="main_content">

    <div id="image_selection">
    <input type="text" value="Enter a number" id="imgNumber" > 
    <button class="numImg">Alert Image Selected</button>
    </div>
    <hr>

    <div id="images">
    <h3>Some Images</h3>
        <p><img src="firetruck.jpg" alt="pic of truck" >  |
        <img src="baseball.jpg" alt="pic of baseball" >  |
        <img src="soccer_ball.jpg" alt="pic of soccer ball" >
        </p>

    </div><!-- end of 'images' div -->
    <hr>

    </div><!-- end 'main_content' div -->
    </body>
    </html>

标签： javascriptjqueryhtmluser-input

解决方案

对兰迪的回答稍作修正。如果要在 div.images 中选择 img 元素，可以执行以下操作：

var imgCount = $("div#images p img").length;

然后在警报中使用 imgCount ：

alert("There are " + imgCount + " images on the page");

推荐阅读