如何使用jQuery显示特定类型图像的图像数量?
所以我有一个包含6个图像的页面。 4是某种类型的球(篮球,棒球等)。一辆是卡车,另一辆是随机的。如何使用jQuery显示特定类型图像的图像数量?
我有一个从两个单选按钮,让用户可以选择显示每种类型的图像(球的图像,卡车图像等)的数量。我需要编写javascript/jquery来获取他们选择的单选按钮,然后在span标签(“有X个球的图片”,“有一个卡车的图片数量X”)下面显示图片计数。 。我可以弄清楚如何获取已检查的值,但我不知道如何获取每种图像的图像数量。 (不只是让单独的跨度与预设数量,只是displaing取其算用户选择)
这里是我到目前为止有:
<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>
<p><img src="hockey_puck.jpg" alt="pic of hockey puck" > |
<img src="tennis_ball.jpg" alt="pic of tennis ball" > |
<img src="basketball.jpg" alt="pic of basketball" > </p>
</div><!-- end of 'images' div -->
<input type="radio" name="imageCount" id="ballImages" value="ballImages">Images of Balls<br>
<input type="radio" name="imageCount" id="truckImages" value="truckImages">Images of Trucks<br><br>
<input type="button" name="btnImageCount" value="Image Count" onclick="getImageCount()">
<span class="spanImageCount"></span>
<script>
function getImageCount()
{
if ($("#ballImages").prop("checked"))
{
var count = $("#images img[src*="ball"]").length;
document.write('<span class="spanImageCount">There are ' + count + ' images of a ball!</span>');
}
else if ($("#truckImages").prop("checked"))
{
var count = $("#images img[src*="truck"]").length;
document.write('<span class="spanImageCount">There are ' + count + ' images of a truck!</span>');
}
}
一种方法:
// bind the click-handling anonymous function to the button-input:
$('input[name="btnImageCount"]').click(function(){
// find the input element whose type is 'radio' and whose name is 'imageCount' which
// is also checked:
var chosen = document.querySelector('input[type="radio"][name="imageCount"]:checked'),
// if there is a chosen radio input, we get the 'type' of image we're looking for,
// by removing the 'Images' string from the 'id', if there is no chosen radio input
// we use a string of white-space:
type = chosen ? chosen.id.replace('Images','') : ' ',
// finding the images whose 'src' attribute contains the substring identified
// above ('truck','ball' or ' ', the ' ' will deliberately not match):
relevantImages = document.querySelectorAll('img[src*="' + type + '"]'),
// if we have any relevant images, and the number (length) of those images
// is greater than 0 we get the number of found images, otherwise we offer
// a simple message to the user telling them to select a type of image:
count = relevantImages && relevantImages.length > 0 ? 'There are ' + relevantImages.length + ' images of that type.' : 'Please select an image type.';
// assigning the text of the 'span' to the count (or message) we set, above:
$('span.spanImageCount').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<p>
<img src="hockey_puck.jpg" alt="pic of hockey puck">|
<img src="tennis_ball.jpg" alt="pic of tennis ball">|
<img src="basketball.jpg" alt="pic of basketball">
</p>
</div>
<!-- end of 'images' div -->
<label>
<input type="radio" name="imageCount" id="ballImages" value="ballImages">Images of Balls
</label>
<br>
<label>
<input type="radio" name="imageCount" id="truckImages" value="truckImages">Images of Trucks
</label>
<br>
<br>
<label>
<input type="button" name="btnImageCount" value="Image Count" />
</label>
<span class="spanImageCount"></span>
参考文献:
- CSS:
- 的JavaScript:
- 的jQuery:
这工作!非常感谢!我怎样才能让消息说“有”数“这种类型的iam”而不是数字?我似乎无法在perenthesis中添加一个字符串 – 2014-10-19 21:11:45
刚刚更新了答案,添加了;我还将''元素包装在'
完全按照我所希望的方式工作。谢谢!! – 2014-10-19 21:37:48
假设您的图像上课无论是“ballImage”或“truckImage”你可以这样做:
function getImageCount(){
if($("#ballImages").prop("checked")){
var count = $(".ballImage").length;
document.write('<span class="spanImageCount">There are ' + count + ' images of a ball!</span>');
}
else if($("#truckImages").prop("checked")){
var count = $(".truckImage").length;
document.write('<span class="spanImageCount">There are ' + count + ' images of a truck!</span>');
}
}
我不知道为什么你使用document.write,但我会考虑这样做:
把一个div在HTML这样的:
<div id="message"></div>
然后让你的getImageCount功能如下所示:
function getImageCount(){
if($("#ballImages").prop("checked")){
var count = $(".ballImage").length;
$("#message).html('<span class="spanImageCount">There are ' + count + ' images of a ball!</span>');
}
else if($("#truckImages").prop("checked")){
var count = $(".truckImage").length;
$("#message).html('<span class="spanImageCount">There are ' + count + ' images of a truck!</span>');
}
}
谢谢!我得到它做我想要的,但我不能得到响应显示在当前页面上。它显示了一个新的空白页面的响应。 – 2014-10-19 00:08:00
Document.write()使页面空白。 – PaulH 2014-10-19 08:03:28
这样的事情应该工作。
var ballCount = 0;
$('img[src*=ball]').each(function(){
if($(this).prop("checked")){
ballCount+=1;
}
});
var truckCount = 0;
$('img[src*=truck]').each(function(){
if($(this).prop("checked")){
truckCount+=1;
}
});
相反,如果图片src不包含这些信息,你需要给一个ID或类每一个形象,以识别是否是卡车或高尔夫球影像。仅在一行$( 'IMG [来源* =东西]')上面的代码变化,并成为
与IDS:$('img[id^=truck]') //where ids need to be like truck1, truckTwo, truckSomething
带班:$('.truck')
如何,在你的HTML,你确定图像类型? – 2014-10-18 23:24:25
为什么jQuery标签?你问/打开jQuery解决方案吗? – j08691 2014-10-18 23:24:38
我希望你的意思是用某种方式在HTML中标记或标记图像,对吗?代码如何知道什么是球,什么是卡车等('data'属性,或基于文件名或其他内容?) – GabbyL1003 2014-10-18 23:25:09