0

假设您有三个元素，全白或根本不应用颜色。如果单击/选择任何元素，它会变为红色，如果单击/选择任何两个元素，它们是红色和绿色。如果单击/选择所有三个元素，它们是红色、绿色、蓝色。现在，当第二次单击任何元素时，它会变回白色，但无论如何它们仍然需要遵循这些规则。

1 个元素 = 红色

2 元素 = 红色、绿色

3 元素 = 红、绿、蓝

到目前为止，在帮助下，我想出了这段代码，但无法弄清楚如何根据所需条件使事件做出反应。例如，如果所有三个都被单击并且我们单击以删除绿色，那么蓝色将需要为绿色。 jsFiddle 类示例

css

.container {
background-color: #ffffff;
border: 1px solid blue;
border-radius: 10px;
width: 100px;
height: 50px;
}
.red { background-color: #ff0000; }
.green { background-color: #00ff00; }
.blue { background-color: #0000ff; }

元素

<div class='container' id='1' style='margin: 150px 0 0 75px; float: left;'></div>
<div class='container' id='2' style='margin: 150px 0 0 175px; float: left;'></div>
<div class='container' id='3' style='margin: 150px 0 0 220px; float: left;'></div>

Javascript

window.onload=function () {
      // set color classes into an array
      var classes = ["red", "green", "blue"];
      var nextClass = 0;
      var element = document.querySelectorAll( ".container" );
      
      // loop through container class elements one at a time onclick run changeClass
      for ( var i = 0; i < element.length; i++ )
      {
          element[i].addEventListener( "click", changeClass );
      }
      
      function changeClass ( eventListener )  
      {
         var element = eventListener.currentTarget;
         var currentClass = hasClass( element, classes );
         
              if ( currentClass )
              {
                  element.classList.remove( currentClass )
              }
              else
              {
                  element.classList.add( classes[nextClass] );
                  nextClass = (nextClass + 1 ) % classes.length;
              }
         
      }//end function
      
      function hasClass( element, classes )
      {
          // loop through classes array
          for ( var i = 0; i < classes.length; i++ )
          {
              // onclick if all classes applied return currentClass
              if ( element.classList.contains( classes[i] ) )
              {
                  return classes[i];
              }
          }
                          
      }// end function
     
}//end onload

有没有办法根据需要的条件加载这些类？

也可以使用 加载内联颜色element.style.backgroundColor，但仍然无济于事。最后一个帮助我的人非常有才华，我希望得到同样的帮助:)......到目前为止已经学到了很多东西，但仍然卡住了，接近但无法做到正确。

这是我想出的代码： 实际查看我更新的代码 jsFiddle

    window.onload=function () {
      var classes = ["red", "green", "blue"];
      var nextClass = 0;
      var element = document.querySelectorAll( ".container" );
      
      for ( var i = 0; i < element.length; i++ )
      {
          element[i].addEventListener( "click", changeClass );
      }
      
      function changeClass ( eventListener )  
      {
         var elementG = document.querySelector( '.green' );
         var elementB = document.querySelector( '.blue' );
         var elementR = document.querySelector( '.red' );
         var element = eventListener.currentTarget;
         var currentClass = hasClass( element, classes );
         var red = removeRed( element, classes );
         var green = removeGreen( element, classes );
         
        if ( currentClass )
        {
            element.classList.remove( currentClass )
            nextClass--;
          if (nextClass < 0) 
          {
              nextClass += classes.length;
          }
        }
        else
        {
            element.classList.add( classes[nextClass] );
            nextClass = (nextClass + 1 ) % classes.length;
        }
        
        if ( red && elementB != null )
        {
            elementB.classList.add( 'red' );
            elementB.classList.remove( 'blue' );
        }
        else if ( red && elementB == null && elementG != null)
        {
            elementG.classList.add( 'red' );
            elementG.classList.remove( 'green' )
        }
        if ( green && elementB != null )
        {
            elementB.classList.add( 'green' );
            elementB.classList.remove( 'blue' );
        }             
              
      }//end function
      
      function hasClass( element, classes )
      {
          // loop through classes array
          for ( var i = 0; i < classes.length; i++ )
          {
              // if all three classes
              if ( element.classList.contains( classes[i] ) )
              {
                  return classes[i];
              }
          }
                          
      }// end function
      
      function removeRed( element, classes )
      {
          if ( element.classList.contains( classes[0] ) )
          {
              return classes[0];
          }
      }// end function
      function removeGreen( element, classes )
      {
          if ( element.classList.contains( classes[1] ) )
          {
              return classes[1]
          }
      }
}//end onload
4

1 回答 1

0

我认为您还需要跟踪元素被单击的顺序。我建议您通过保留将充当一种键/值对的对象来做到这一点，其中键是元素单击/取消单击的“id”，值是它被单击的数字（即 1 =红色，2 = 绿色等）。

然后，在changeClass()中，添加类的时候，也可以在对象中添加被点击的编号。删除类时，您可以取消设置对象中的键并迭代对象中的项目并减少具有更高值的任何内容。此递减量将允许您调整在“未单击”按钮之后单击的任何内容的颜色/数量（例如，如果您“未单击”绿色按钮，则蓝色按钮应变为绿色）。

可能看起来像这样：

用这个初始化：

var state = {};

单击时执行此操作（在增加下一个类之前）：

state[element.id] = nextClass;

取消单击时执行此操作：

var removedNum = state[element.id];
delete state[element.id];
nextClass--;
if (nextClass < 0) { nextClass += classes.length; }
var i;
var keys = Object.keys(state);
for (i = 0; i < keys.length; i++) {
    if (state[keys[i]] >= removedNum) {
        // decrement only things after the button unclicked
        var checkElement = document.getElementById(keys[i]);
        state[keys[i]]--;
        var checkClass = hasClass(checkElement, classes);
        if (checkClass) {
            // remove its existing class
            checkElement.classList.remove(checkClass);
        }
        // add the one it should now have
        checkElement.classList.add( classes[state[keys[i]]] );
    }
}
于 2013-07-30T00:27:44.673 回答