Question

我试图找到一个简单的解决方案（我是一个完全编码的初学者，只需在＃34开箱即用的小部件中使用javascript＆＃34;页面）以解决以下问题：

访问者可以通过单击“删除/显示”来选择多个属性

属性a（删除/显示）
属性b（删除/显示）
属性c（删除/显示）
a.s.o。

根据访问者＆＃34;选择＆＃34;，我想显示或隐藏元素列表：

元素1（属性a和b） - 删除if＆＃34; a＆＃34;或＆＃34; b＆＃34;已被选中
元素2（属性a） - 删除if＆＃34; a＆＃34;已被选中
元素3（属性a和c） - 删除，如果＆＃34; a＆＃34;或者＆＃34; c＆＃34;已被选中
a.s.o。

我已经能够基于＆＃34;选择＆＃34;来隐藏元素，但在我的解决方案中，每个元素仅根据唯一ID显示和隐藏（因此也仅基于单个选择）。

我找到的Javascript是：

<script type="text/javascript">
//<![CDATA[
function swap(openlink,closelink, linkid, dataid)
{
if( document.getElementById(dataid).style.display == 'none')
{
document.getElementById(dataid).style.display='inline';
document.getElementById(linkid).firstChild.nodeValue=closelink;
} else
{
document.getElementById(dataid).style.display='none';
document.getElementById(linkid).firstChild.nodeValue=openlink;
}
}
//]]>
</script>

而且我可以使用此HTML代码删除/显示元素：

attribute a <a href="#swap" onclick="javascript:swap('Show','Remove', 'swaplinkA', 'showmeA')" id="swaplinkA" onfocus="this.blur()" name="swaplinkA">Remove</a>
attribute b <a href="#swap" onclick="javascript:swap('Show','Remove', 'swaplinkB', 'showmeB')" id="swaplinkB" onfocus="this.blur()" name="swaplinkB">Remove</a>
attribute c <a href="#swap" onclick="javascript:swap('Show','Remove', 'swaplinkC', 'showmeC')" id="swaplinkC" onfocus="this.blur()" name="swaplinkC">Remove</a>

我的元素将由此删除/显示：

<div id="showmeA" style="display:inline">Element 1</div>
<div id="showmeB" style="display:inline">Element 2</div>
<div id="showmeB" style="display:inline">Element 3</div>

是否有一种简单的方法可以将2个ID添加到一个＆＃34;元素＆＃34;，以便例如可以通过id = showmeA AND id = showmeB隐藏元素1？

Answer 1

您自己说过这个问题： ID是唯一的。

这正是您应该使用id以外的其他内容的原因，而class属性非常精细，因为它不必是唯一的。

然后，这意味着该功能不会使用getElementById()而是使用getElementsByClassName()查找您的元素。

请注意，此函数获取元素 s ，这涉及您必须遍历这些元素 s 并隐藏/显示目标元素。

function swap(openlink, closelink, linkid, dataclass) {
    var elements = document.getElementsByClassName(dataclass);
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if(element.style.display == 'none') {
            element.style.display='inline';
            document.getElementById(linkid).firstChild.nodeValue=closelink;
        } else {
            element.style.display='none';
            document.getElementById(linkid).firstChild.nodeValue=openlink;
        }
    }
}

不要忘记将id by class属性替换为HTML，您可以根据需要添加，只需要用空格分隔：

<div class="showmeA showmeB">Element 1</div>
<div class="showmeB">Element 2</div>
<div class="showmeC">Element 3</div>

以下示例可用于更好地了解解决方案中使用的功能和属性，这可以解决您的问题：https://jsfiddle.net/sy2mxscf/

通知您inline Javascript is bad也很重要，当您的Javascript技能提高时，您应该重新考虑您的代码。

为了解决注释中指出的问题，你必须使用某种计数器并在隐藏元素时递增它，在显示其中一个类的元素时递减它，并在显示关联元素时这个计数器是0。

这也是为什么你需要两个不同的链接：“删除”增加，“显示”减少。

有几种方法可以实现此解决方案：

在Javascript中使用关联数组
在元素上使用自定义属性
添加和删除特定类

我选择了最后一个，但这可能不是最好的一个，这只是其中一种可能性。

https://jsfiddle.net/sy2mxscf/2/

想法是添加或删除自定义的“hidemeX”类。如果单击指向同一元素的两个不同的“删除”链接，则会添加两个类。如果您随后单击任何“显示”链接，将删除关联类。但是在你点击第二个链接之前仍然有一个“hidemeX”类，所以由于CSS，元素不会显示。

Answer 2

正如Delgan所说，最好在这里使用google.visualization.events.addListener(chart, 'ready', function() { var rects = document.getElementById('linechart_material') .querySelector('svg') .querySelector('g:nth-of-type(2)') .querySelector('g:nth-of-type(1)') .querySelector('g:nth-of-type(4)') .querySelectorAll('rect') for (var i=0;i<rects.length;i++) { rects[i].setAttribute('stroke', getRandomColor()); rects[i].setAttribute('stroke-width', '5'); } });，并且您可以将这些class的ID用作他们的类，因此当您使用函数<a>时，您可以轻松地追溯以确定是否选择了元素，因此应删除div。

下面是如何分离javascript逻辑和html结构。

swap

var swap = function(e) {
    var close = 'Remove', open = 'Show';
    var next = this.text === close ? open : close;
    // Set the clicked <a>'s text.
    this.text = next;
  
    // Get divs that will affect by this <a>
    var affectTarget = this.id;
    
    // Affected div elements
    var targets = document.getElementsByClassName(affectTarget); 
    var i, len = targets.length;
    var visible;
    
    var watch, wLen, j;
     
    // For each <div> that will be affect by the clicked <a>, we have to chec :
    for (i = 0; i < len; ++i) {
        // Get the classes that used as a list to show which <a> will have a effect on it.
        watch = targets[i].classList;
        wLen = watch.length;
        // visibilty is default to inline, if no <a> that it watches is selected, then it'll show
        visible = "inline";
        for (j = 0; j < wLen; ++j) {
            // If any of the <a> it watches is selected, set the visibilty to none.
            if (document.getElementById(watch[j]).text === open) {
                visible = "none";
                break;
            }
        }
        targets[i].style.display  = visible;
    }
};

// For each switcher, we register a click event for it.
var switchers = document.querySelectorAll("a.showSwitcher");
var i, len = switchers.length;
for (i = 0; i < len; ++i) {
    switchers[i].addEventListener('click', swap);
}

按属性选择显示/隐藏具有多个属性的元素（Javascript）

2 个答案: