Question

代码操纵表以显示彼此相邻的软件功能（以便人们可以比较它们）。当有人点击特定的软件图标时，它会在表格中显示或隐藏该软件的功能。

以下代码在IE9中完美运行，但features.querySelectorAll不会在Chrome中填充标题/列。

element.querySelectorAll在Chrome中不起作用吗？

function viewfeature(feature) {
    var features = document.querySelector('#birdseye');
    var headers = features.querySelectorAll('th');
    var columns = features.querySelectorAll('td');
    if (feature.getAttribute("class") == 'selected') {
        feature.setAttribute("class", 'unselected');
        for (var i = 0; i < headers.length; i++) {
            if (headers[i].value == feature.id) {
                headers[i].style.display = 'none';
            }
        }
        for (var i = 0; i < columns.length; i++) {
            if (columns[i].value == feature.id) {
                columns[i].style.display = 'none';
            }
        }
    } else {
        feature.setAttribute("class", "selected");
        for (var i = 0; i < headers.length; i++) {
            if (headers[i].value == feature.id) {
                headers[i].style.display = 'block';
            }
        }
        for (var i = 0; i < columns.length; i++) {
            if (columns[i].value == feature.id) {
                columns[i].style.display = 'block';
            }
        }
    }
}

<table class="apps">
    <tr>
        <td id="npg206" class="selected" onclick="viewfeature(this);"><img src="images/app-npg206.png" title="NamePrint Graphics 2.06"/></td>
        <td id="npg2061" class="selected" onclick="viewfeature(this);"><img src="images/app-npg2061.png" title="NamePrint Graphics 2.061"/></td>
        <td id="npg30" class="selected" onclick="viewfeature(this);"><img src="images/app-npg30.png" title="NamePrint Graphics 3.0"/></td>
        <td id="npgo" class="selected" onclick="viewfeature(this);"><img src="images/app-npo.png" title="NPG Online"/></td>
        <td id="npgw" class="selected" onclick="viewfeature(this);"><img src="images/app-npw.png" title="NPG Web"/></td>
        <td id="npgj" class="selected" onclick="viewfeature(this);"><img src="images/app-npj.png" title="NPG Java"/></td>
        <td id="enpg" class="selected" onclick="viewfeature(this);"><img src="images/app-enp.png" title="E-store NPG"/></td>
        <td id="tagw" class="selected" onclick="viewfeature(this);"><img src="images/app-tag.png" title="Tagware"/></td>
        <td id="word" class="selected" onclick="viewfeature(this);"><img src="images/app-word.png" title="Word Templates"/></td>
    </tr>
</table>
<table class="birdseyeview" id="birdseye">
    <tr>
        <th class="subcat">Restrictions</th>
        <th value="npg206">NPG 2.06</th>
        <th value="npg2061">NPG 2.061</th>
        <th value="npg30">NPG 3.0</th>
        <th value="npgo">NPG Online</th>
        <th value="npgj">NPG Java</th>
        <th value="npgw">NPG Web</th>
        <th value="enpg">E-NPG</th>
        <th value="tagw">TagWare</th>
        <th value="word">Word</th>
    </tr>
    <tr>
        <td>Administrator rights<span>Example:<br/><img src="images\admin.png" alt="Administrative Rights"/></span></td>
        <td value="npg206" class="green"></td>
        <td value="npg2061" class="green"></td>
        <td value="npg30" class="green"></td>
        <td value="npgo" class="green"><span>If Silverlight isn't installed</span></td>
        <td value="npgj"></td>
        <td value="npgw"></td>
        <td value="enpg"></td>
        <td value="tagw" class="green"></td>
        <td value="word"></td>
    </tr>
    <tr>
        <td>Internet access</td>
        <td value="npg206"></td>
        <td value="npg2061"></td>
        <td value="npg30"></td>
        <td value="npgo" class="green"></td>
        <td value="npgj"></td>
        <td value="npgw" class="green"></td>
        <td value="enpg" class="green"></td>
        <td value="tagw"></td>
        <td value="word"></td>
    </tr>

Answer 1

这是问题所在。这是您在.value元素上执行.getAttribute("value")而不是th。

//if (headers[i].value == feature.id) { // Won't work in Chrome

if (headers[i].getAttribute("value") == feature.id) {

IE会将.value属性映射到value="..."属性，但Chrome 正确不会执行此操作。 th元素没有本地.value属性，因此不应该有这样的映射。

最好使用HTML5 data-属性来实现前向兼容性。

<th data-value="npg206">NPG 2.06</th>

然后在旧浏览器中：

headers[i].getAttribute("data-value")

或者在HTML5浏览器中，您可以这样做：

headers[i].data.value

脚本循环遍历Chrome中不起作用的元素

1 个答案: