Question

我需要一些帮助，这看起来很简单，但我的网页上有一个反转颜色按钮，我需要循环使用类名为{ "name": "wordsum", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "electron main.js", "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=App/assets/WSlogo.icns --prune=true --out=release-builds", "build": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=App/assets/WSlogo.ico --prune=true --out=release-builds --version-string.CompanyName=DevX --version-string.FileDescription=DevX --version-string.ProductName=\"WordSum\"", "package-linux": "electron-packager . --overwrite --platform=linux --arch=x64 --icon=App/assets/WSlogo.png --prune=true --out=release-builds" }, "author": "Thaaraka Romesh", "license": "MIT", "dependencies": { "angular": "^1.6.2", "bootstrap": "^3.3.7", "jquery": "^3.1.1" }, "devDependencies": { "electron": "^1.4.15", "electron-packager": "^8.5.1" } }的元素。

以下是代码：

＆＃13;

text

＆＃13;

//Javascript File

var text = document.getElementsByClassName('text');
var button = document.getElementById('invertcolors');

function onClick() {
  for (var i = 0; i < text.length; i++) {
    //Do something like this:
    //text[i].style.color = 
  }
}

button.addEventListener('click', onClick, false);

＆＃13;

我需要遍历i变量中的元素，并将它们的颜色设置为白色。我不知道怎么样，有人可以帮忙吗？谢谢！

Answer 1

请检查以下javascript代码：

var text = document.getElementsByClassName('text');
var button = document.getElementById('invertcolors');

function onClick() {
var selectedId
console.log(text[0].getAttribute( 'id' ));
  for (var i = 0; i < text.length; i++) {
   console.log(text[i].getAttribute('id'));
   selectedId = text[i].getAttribute('id');
   document.getElementById(selectedId).style.color = "white";
  }
}

button.addEventListener('click', onClick, false);

并检查代码@ https://jsfiddle.net/cskcvarma/akLx5tt8/7/

如果有帮助，请告诉我。

Answer 2

SELECT 
    IFNULL(hqp.IsActive, qd.ItemName) AS Item_Name, DATE_FORMAT(IFNULL(hqp.SalesDate, qd.SalesDate), '%m-%d-%Y') AS effectDate, IFNULL(hqp.NoBid, qd.NoBid) AS noBid, IFNULL(hqp.VendorName, qd.VendorName) AS vendor, IFNULL(hqp.Source, qd.Source) AS source, IFNULL(hqp.Type, qd.Type) AS type, IFNULL(hqp.Cost, qd.PurchaseCost) AS cost, IFNULL(hqp.Price, qd.SalesPrice) AS price, IFNULL(hqp.ConditionCode, '') AS conditionCode, qi.UnitOfMeasureSetRef_FullName AS uom
FROM wp_quantum_data AS qd
LEFT JOIN wp_quickbook_items AS qi ON qi.ListID = qd.ItemListID
LEFT JOIN wp_hunter_quote_parts AS hqp ON qi.ListID = hqp.ItemListID AND hqp.IsActive = 1
WHERE qd.IsActive = 1
GROUP BY Item_Name
ORDER BY Item_Name ASC

Answer 3

您几乎拥有所需的确切代码，请参阅下文，了解您想要的工作版本。

var text = document.getElementsByClassName('text');
var button = document.getElementById('invertcolors');

function onClick() {
  for (var i = 0; i < text.length; i++) {
    text[i].style.color = '#f00';
  }
}

button.addEventListener('click', onClick, false);

#invertcolors {
  height:20px;
  width:100px;
  border:1px solid black;
  border-radius:7px;
  }

<div id="content">
  <font id="text1" class="text">I walked in the forest</font>
  <br>
  <font id="text2" class="text">Through the grey concrete path</font>
  <br>
  <font id="text3" class="text">Holding on the dog</font>
</div>
<div id='invertcolors'>Button</div>

Answer 4

您可以使用querySelectorAll方法来执行此操作。 HTML5中不支持<font>元素，因此您应将其替换为例如<span>元素。

＆＃13;

var button = document.getElementById('click');

button.addEventListener('click',function(){
  var elements = document.querySelectorAll('.text');
  elements.forEach(function(a){
  	a.style.backgroundColor = 'yellow';
  });
});

＆＃13;

<div id="content">
  <span id="text1" class="text">I walked in the forest</span>
  <br>
  <span  id="text2" class="text">Through the grey concrete path</span>
  <br>
  <span id="text3" class="text">Holding on the dog</span>
</div>

<br/>

<button id="click">change style</button>

＆＃13;

循环通过类和改变颜色

4 个答案: