Question

假定具有表单并具有一组图像的任何网页。我需要在页面加载时填充输入文本值并提交。

var imgs = document.getElementsByTagName('img');
var countImagesFilled = 0;

var curImg;
for(var i = 0; i < imgs .length; i++) {
  curImg = imgs[i];
if(curImg.getAttribute('src')=='abc.png'){++countImagesFilled;}
}
var inputValue = document.getElementsByName('valuee');
inputValue[0].value=countImagesFilled;
document.forms[0].submit();

Answer 1

签出此working example：）

window.onload = ()=>{
  // get our form
  let imageForm = document.getElementById('image-form');
  // something to inform us that the form has been submitted
  imageForm.addEventListener('submit', function(){
    console.log(`form data: ${$(this).serialize()}`);
  });
  
  // get all the img elements
  let images = document.querySelectorAll('img');
  // get the input field where we'll be putting the total image count
  let field = document.getElementById('image-count');
  // the number of images that match our criteria
  let imageCount = 0;
  // count the number of img elements that have 'test.png' as their source
  for(let i = 0; i < images.length; i++){
    if(images[i].getAttribute('src') === 'test.png'){
      imageCount++;
    }
  }
  
  // set the image count (imageCount) as the value of the text field
  field.value = imageCount;
  
  // submit the form
  imageForm.dispatchEvent(new Event('submit'));
};

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<form id="image-form" name="imageCount">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="exclude.png" class="img-2">
  <img src="exclude.png" class="img-2">
  <img src="exclude.png" class="img-2">
  <img src="exclude.png" class="img-2">
  <img src="exclude.png" class="img-2">
  <input type="text" id="image-count" name="imageWithSourceCount">
</form>

考虑到以下HTML，还有另外一件事：

<img src="images/test.png" class="img-1">

如果您阅读图像对象（img.src）的 src 属性，则将获得解析的路径，类似于yourwebsite.com/images/test.png。但是，如果使用 getAttribute （img.getAttribute('src')）进行检索，则会获得src属性的实际值，该值也可能是相对路径（即{{1} }）

Answer 2

['auth_type'] = 'config';
['Servers'][$i]['user'] = 'root';
['Servers'][$i]['password'] = '';
['AllowNoPassword'] = true;

我需要计算网页中具有“ src”特定值的图像，并使用脚本自动填充输入字段并提交页面

2 个答案: