在点击HTML元素时更改数据属性 [英] Change data-attribute on click of HTML elements
本文介绍了在点击HTML元素时更改数据属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在点击< tr> 时将更改应用于DOM。点击后，它应该添加 data-state = enabled 和 data-display = expanded 到点击的<$ c $当应用 data-state = disabled 和 data-display =折叠< tr> 到其他所有 和< tr> 。 在禁用其他行时突出显示所点击的行。然后，当某行突出显示，并且用户在其他地方点击时，它应该重置为默认值，即数据 -state = enabled data-display = collapsed 全部< tr> ' s
目前，我的工作方式是，当点击< tr> 时，该行会突出显示其他所有人都被禁用。但是，该脚本缺少重置为默认值，因为如果单击了另一个< tr> ，它会立即突出显示其中一个，并禁用其余的。
我想在香草javascript中做到这一点，但我也打算使用jQuery，如果它更容易，并且不会显着影响性能。 b
$ b
以下是带有工作代码的JSbin，以查看它的位置：
https ：//jsbin.com/kirati/
到目前为止的代码：
< table class =table>
< thead>
< tr>
< th class =sort-key asc>< a href =＃>宠物名称< / a>< / th>
< th>< a href =＃>所有者（Last，First）< / a>< / th>
< th>< a href =＃>种类< / a>< / th>
< th>< a href =＃>品种< / a>< / th>
< th>< a href =＃> ID< / a>< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>
Fluffy
< div class =table-row__expanded-content>
< data-key>性别：< / data-key> < data-value>男性< / data-value>< br />
< data-key> DOB：< / data-key> <数据值> 12/08/2010< /数据值GT; < br />
< data-key>重量：< / data-key> < data-value> 20 lbs< / data-value> < br />
< data-key>位置：< / data-key> < data-value>犬舍2B< /数据值> < br />
< data-key>气质：< / data-key> <数据值> Aggresive< /数据值GT; < br />
< data-key>过敏：< / data-key> < data-value> Sulfa，青霉素，花生< / data-value>
< / div>
< / td>
< td>安德森，詹姆斯< / td>
< td>狗< / td>
< td> Bulldog-Shitzu< / td>
< td> ABCDE1234567< / td>
< / tr>
< tr>
< td>羽毛< / td>
< td> Michelle Charlotte，< br />天使凡妮莎< / td>
< td> Cat< / td>
< td> American Bobtail< / td>
< td> FGHIJ1234567< / td>
< / tr>
< tr>
< td> Fluffer-Nutter< / td>
< td> Rakerstraw，Rickey< / td>
< td>狗< / td>
< td>美国爱斯基摩人< / td>
< td> KLMNO1234567< / td>
< / tr>
< tr>
< td> Farley< / td>
< td>坎宁安，斯蒂芬妮< / td>
< td>狗< / td>
< td> Pomeranian< / td>
< td> PQRST1234567< / td>
< / tr>
< tr>
< td>模糊< / td>
< td>威尼斯，哈丁< / td>
< td> Cat< / td>
< td>缅甸< / td>
< td> UVWXY1234567< / td>
< / tr>
< tr class =alphabet-label>
< td> G< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< / tr>
< tr>
< td> Goldie< / td>
< td> Cherilyn，Mitchener< / td>
< td>狗< / td>
< td>奇瓦瓦马耳他< / td>
< td> ZABCD1234567< / td>
< / tr>
< / tbody>
< / table>
和Javascript
window.onload = function（）{
var tablerow = document.body.getElementsByTagName（'tr'）;
console.log（tablerow）;
//将HTMLCollection转换为一个真正的javascript数组，因此我们可以用它来做东西
var tablerowArr = Array.prototype.slice.call（tablerow）;
console.log（tablerowArr）;
//做东西
tablerowArr.forEach（function（value，i）{
console.log（i，value）;
tablerow [ i] .onclick = function（e）{
//console.log(\"clicked！）;
var newArr = tablerowArr.slice（i，i + 1 ）;
//console.log(tablerow）;
console.log（i）;
//console.log(tablerowArr）;
console.log（'newArr' ，newArr）;
tablerowArr.forEach（function（value，i）{
//首先重置数据的所有实例-XXX
tablerowArr [i] .setAttribute（'data-display'，collapsed）;
// tablerowArr [i] .setAttribute（'data-state'，enabled）;
/ /点击
newArr [0] .setAttribute（'data-display'，tablerowArr [i] .getAttribute（'data-display'）===将< tr> data-display属性设置为展开/折叠崩溃了？扩大了：collapsed）;
//tablerowArr[i].setAttribute('data-display'，tablerowArr [i] .getAttribute（'data-display'）===折叠？ 展开：折叠）;
//设置< tr>点击
newArr [0] .setAttribute（'data-state'，newArr [0] .getAttribute（'data-state'）===disabled启用/禁用数据状态属性？ ：启用）;
tablerowArr [i] .setAttribute（'data-state'，newArr [0] .getAttribute（'data-state'）===enabled？disabled：enabled）;
}）;
e.preventDefault（）;
};
}）;
};
解决方案
以下是jsfiddle中的纯javascript示例：
http://jsfiddle.net/pya9jzxm/14
var tbody = document.querySelector（'tbody'）;
var trs = tbody.querySelectorAll（'tr'）;
var tr，index = 0，length = trs.length; （;; index< length; index ++）{
tr = trs [index];
tr.setAttribute（'data-state'，'enabled'）;
tr.setAttribute（'data-display'，'collapsed'）;
tr.addEventListener（'click'，
function（）{
if（this.classList.contains（'alphabet-label'））{
return;
}
var trIndex = 0，trLength = trs.length，hasExpanded = false;
var state ='disabled';
if（tbody.querySelectorAll（'[data-display =expanded （'; trIndex< trLength; trIndex ++）{$ b';}'）。
hasExpanded = true;
state ='enabled';
}
$ b trs [trIndex] .setAttribute（'data-state'，state）;
trs [trIndex] .setAttribute（'data-display'，'collapsed'）;
}
if （！hasExpanded）{
this.setAttribute（'data-state'，'enabled'）;
this.setAttribute（'data-display'，'expanded' ）;
}
}
）;
}
};
I am trying to apply changes to the DOM when a <tr> is clicked. When clicked, it should add data-state=enabled and data-display=expanded to the clicked <tr> while applying data-state=disabled and data-display=collapsed to every other <tr>.
So it should look like highlighting the clicked row while disabling the other rows.
Then, when a row is highlighted, and a user clicks elsewhere, it should reset to default, i.e. data-state=enabled and data-display=collapsed for all <tr>'s
Currently, I have it working so that when a <tr> is clicked, that row is highlighted and all others disabled. However, the script is missing the reset to default because if another <tr> is clicked, it immediately highlights that one and disables the rest.
I would like to do this in vanilla javascript but I am also open to using jQuery if it is substantially easier and won't affect performance noticably.
Here is the JSbin with working code to see where it's at: https://jsbin.com/kirati/
And the code so far:
<table class="table">
<thead>
<tr>
<th class="sort-key asc"><a href="#">Pet Name </a></th>
<th><a href="#">Owner (Last, First)</a></th>
<th><a href="#">Species</a></th>
<th><a href="#">Breed</a></th>
<th><a href="#">ID</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>
Fluffy
<div class="table-row__expanded-content">
<data-key>Sex: </data-key> <data-value>Male</data-value><br />
<data-key>DOB: </data-key> <data-value>12/08/2010</data-value> <br />
<data-key>Weight: </data-key> <data-value>20 lbs</data-value> <br />
<data-key>Location: </data-key> <data-value>Kennel 2B</data-value> <br />
<data-key>Temperament: </data-key> <data-value>Aggresive</data-value> <br />
<data-key>Allergies: </data-key> <data-value>Sulfa, Penicillin, Peanuts</data-value>
</div>
</td>
<td>Anderson, James</td>
<td>Dog</td>
<td>Bulldog-Shitzu</td>
<td>ABCDE1234567</td>
</tr>
<tr>
<td>Feather</td>
<td>Michelle Charlotte, <br /> Angel Vanessa</td>
<td>Cat</td>
<td>American Bobtail</td>
<td>FGHIJ1234567</td>
</tr>
<tr>
<td>Fluffer-Nutter</td>
<td>Rakerstraw, Rickey</td>
<td>Dog</td>
<td>American Eskimo</td>
<td>KLMNO1234567</td>
</tr>
<tr>
<td>Farley</td>
<td>Cunningham, Stephanie</td>
<td>Dog</td>
<td>Pomeranian</td>
<td>PQRST1234567</td>
</tr>
<tr>
<td>Fuzzy</td>
<td>Venice, Harding</td>
<td>Cat</td>
<td>Burmese</td>
<td>UVWXY1234567</td>
</tr>
<tr class="alphabet-label">
<td>G</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Goldie</td>
<td>Cherilyn, Mitchener</td>
<td>Dog</td>
<td>Chihuahua-Maltese</td>
<td>ZABCD1234567</td>
</tr>
</tbody>
</table>
And the Javascript
window.onload = function () {
var tablerow = document.body.getElementsByTagName('tr');
console.log(tablerow);
// Convert the HTMLCollection into a true javascript Array, so we can do "stuff" with it
var tablerowArr = Array.prototype.slice.call(tablerow);
console.log(tablerowArr);
// Do stuff
tablerowArr.forEach(function (value, i) {
console.log(i, value);
tablerow[i].onclick = function (e) {
//console.log("clicked!");
var newArr = tablerowArr.slice(i, i + 1);
//console.log(tablerow);
console.log(i);
//console.log(tablerowArr);
console.log('newArr', newArr);
tablerowArr.forEach(function (value, i) {
// first reset all instances of data-XXX
tablerowArr[i].setAttribute('data-display', "collapsed");
// tablerowArr[i].setAttribute('data-state', "enabled");
// Set the <tr> data-display attribute to expanded/collapsed on click
newArr[0].setAttribute('data-display', tablerowArr[i].getAttribute('data-display') === "collapsed" ? "expanded" : "collapsed");
//tablerowArr[i].setAttribute('data-display', tablerowArr[i].getAttribute('data-display') === "collapsed" ? "expanded" : "collapsed");
// Set the <tr> data-state attribute to enabled/disabled on click
newArr[0].setAttribute('data-state', newArr[0].getAttribute('data-state') === "disabled" ? "enabled" : "enabled");
tablerowArr[i].setAttribute('data-state', newArr[0].getAttribute('data-state') === "enabled" ? "disabled" : "enabled");
});
e.preventDefault();
};
});
};
解决方案
Here is a pure javascript example in the below jsfiddle:
http://jsfiddle.net/pya9jzxm/14
var tbody = document.querySelector('tbody');
var trs = tbody.querySelectorAll('tr');
var tr, index = 0, length = trs.length;
for (; index < length; index++) {
tr = trs[index];
tr.setAttribute('data-state', 'enabled');
tr.setAttribute('data-display', 'collapsed');
tr.addEventListener('click',
function () {
if (this.classList.contains('alphabet-label')) {
return;
}
var trIndex = 0, trLength = trs.length, hasExpanded = false;
var state = 'disabled';
if (tbody.querySelectorAll('[data-display="expanded"]').length > 0) {
hasExpanded = true;
state = 'enabled';
}
for (; trIndex < trLength; trIndex++) {
trs[trIndex].setAttribute('data-state', state);
trs[trIndex].setAttribute('data-display', 'collapsed');
}
if (!hasExpanded) {
this.setAttribute('data-state', 'enabled');
this.setAttribute('data-display', 'expanded');
}
}
);
}
};
这篇关于在点击HTML元素时更改数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
