Question

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

我有两个单选按钮，用户可以选择显示每种图像的数量（球的图像，卡车的图像等）。我需要编写javascript / jquery来获取他们选择的单选按钮，然后在span标签中显示下面的图像数量（＆＃34;有一定数量的球图片＆＃34;，＆＃34;有X卡车的图片数量＃34;）。我可以弄清楚如何获取被检查的值，但我不知道如何获得每种类型图像的图像数量。（不仅仅使用预设的数字进行单独的跨度，只需替换用户选择的数量）

这是我到目前为止所得到的：

<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

假设您的图像具有＆＃34; ballImage＆＃34;或＆＃34; truckImage＆＃34;你可以这样做：

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属性包含＆＃34; ball＆＃34;或＆＃34;卡车＆＃34;对于每个图像。

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或类，以确定它是卡车还是球形图像。以上代码仅在$（＆＃39; img [src * = something]＆＃39;）行变更，并成为

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

课程：$('.truck')

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

3 个答案: