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

Question

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

我有一个带有两个单选按钮的 from，用户可以选择显示每种图像的数量（球图像、卡车图像等）。我需要编写 javascript/jquery 来获取他们选择的单选按钮，然后在 span 标签中显示下面的图像计数（“有 X 数量的球图片”，“有 X 数量的卡车图片”） .我可以弄清楚如何获取检查内容的值，但我不知道如何获取每种类型图像的图像计数。 （不只是用预设的数字制作单独的跨度，而只是显示用户选择的任何计数）

这是我目前得到的：

<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()。

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，但我会考虑这样做：

像这样在你的 html 中放置一个 div：

<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

如果图像 src 属性包含每个图像的“球”或“卡车”，这样的方法应该可以工作。

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[src*=something]') 行发生了变化，变成了

带有 ID：$('img[id^=truck]') //where ids need to be like truck1, truckTwo, truckSomething

类：$('.truck')