接受用户输入并警告图像

时间:2018-10-14 17:58:03

标签: javascript jquery html user-input

我正在尝试使用DOM找出页面上有多少图像并将其存储到变量中。一旦发现要打印出“页面上有VARIABLE(从变量获取任何数字)图像”。接下来,将出现一个文本框,用户可以在其中输入数字(如1),并且当他们单击“执行”按钮时,第一张图像将在另一页上弹出(提示)。我不确定我的代码在做什么错,但是我很困惑。我知道我需要使用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>

3 个答案:

答案 0 :(得分:0)

首先,您错过了一个报价:

更改:

var image = $(.img).length;

收件人:

var image = $(".img").length;

下一步:

  

我正在尝试使用DOM和   将其存储到变量。

您已完成以下操作:image变量

  

一旦我发现我要打印“   是页面上的可变图像。”

您需要先将该文本放入HTML中-然后我们将解决其余问题

  

接下来,将有一个文本   用户可以在其中输入数字(例如1)的框,   当他们单击“执行”按钮时,弹出另一个页面(警告)。

好吧,您不能将图像置于警报中。

抓取图像并参考要使用的索引:

var images = $('img'); var requestedImageNumber = $('#imgNumber').val(); var requestedImage = images[requestedImageNumber -1]; window.open(requestedImage.src);

这可以帮助您入门。有很多事情要做。请欣赏我保持简单的事实,以便您取得进步。

答案 1 :(得分:0)

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

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

然后在警报中使用imgCount:

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

答案 2 :(得分:0)

这是失踪的一块。要在页面上插入新内容,您可以执行以下操作:

var image = $("img").length;
// Create a new <p> element and add the text to it.
var text = $('p').text("There are " + image + " images.");
// Insert as the first child of the #image_selection div
$('#image_selection').prepend(text);

引用jQuery DOM manipulation functions

如果您要在同一窗口中显示图像而不是使用@RandyCasburn提出的window.open,则可以查看“模态窗口”,但这将需要一些工作。