如何使用jQuery显示特定类型图像的图像数量？

Question

所以我有一个包含6个图像的页面。 4是某种类型的球（篮球，棒球等）。一辆是卡车，另一辆是随机的。

我有一个从两个单选按钮，让用户可以选择显示每种类型的图像（球的图像，卡车图像等）的数量。我需要编写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>'); 
    } 
} 

Answer 1

一种方法：

// 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：
  • :checked pseudo-class。
  • Substring-matching attribute selectors。
• 的JavaScript：
  • document.querySelector()。
  • String.replace()。
• 的jQuery：
  • click()。
  • text()。如果图像src属性包含每个图像的“球”或“卡车”

Answer 2

假设您的图像上课无论是“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>'); 
    } 
} 

Answer 3

这样的事情应该工作。

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')