我正在尝试使用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>
答案 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
,则可以查看“模态窗口”,但这将需要一些工作。