有麻烦的Javascript

时间：2018-03-17 20:00:46

标签： javascript arrays svg getattribute

因此HTML包含一个SVG rect（正方形，高度和宽度相等）元素的表格网格。

点击后，每个方格都可以在100px和50px之间切换，使用以下代码：

＆＃13;
＆＃13; 
function clickChng() {
// Targets the svg rectangle being clicked
	var recwidth = event.target.getAttribute("width");
// if already 100px it changes it to 50px
	if (recwidth == 100) {
    event.target.setAttributeNS(null, 'height', 50);
	event.target.setAttributeNS(null, 'width', 50);
	event.target.setAttributeNS(null, 'x', 25);
    event.target.setAttributeNS(null, 'y', 25);
	}
// otherwise, changes it back to 100px, which is the only other case
	else {
	event.target.setAttributeNS(null, 'height', 100);
	event.target.setAttributeNS(null, 'width', 100);
	event.target.setAttributeNS(null, 'x', 0);
    event.target.setAttributeNS(null, 'y', 0);
	}
}
＆＃13;
＆＃13;
＆＃13;

我需要一个能够识别所有方块何时处于特定状态的函数，宽度= 50px。

到目前为止，我一直在尝试使用.every（）数组方法，但是它已经无处可去，只是想知道是否有人可以阐明我将如何做到这一点？

我面临的主要问题似乎是使用every（）方法需要另一个函数，我不想在clickChng（）中嵌套一个函数，但我想要检查的函数每次点击一个正方形时运行的所有正方形，以防它是完成该集合的最后一个正方形。

我在这里创建函数：

＆＃13;
＆＃13; 
function checkAll(sqrs) {
		if (sqrs.getAttributeNode("width").value == 50) {
		alert("Complete!");
		}
	}
 
 //reca is an array which recturns all the rect elements
 
 reca.every(checkAll)
＆＃13;
＆＃13;
＆＃13;

这里是完整的代码，看起来很冗长，但实际上很容易让你头脑发热。表元素构成了大部分代码：

＆＃13;
＆＃13; 
var reca = document.getElementsByClassName("recel");
//New function to alter the properties of the rectangles globally
function changeprops() {

  //Loop globally Changes the attributes of the RECTANGLE element
  for (var i = 0; i < reca.length; i++) {
    var za = reca[i];
    za.setAttributeNS(null, 'height', 100);
    za.setAttributeNS(null, 'width', 100);
    za.setAttributeNS(null, 'x', 0);
    za.setAttributeNS(null, 'y', 0);
    za.setAttributeNS(null, 'fill', 'rgb(0, 150, 199)');
  }

  var svga = document.getElementsByClassName("svgel");
  //Loop globally hanges the attributes of the SVG element
  for (var i = 0; i < svga.length; i++) {
    var zb = svga[i];
    zb.setAttributeNS(null, 'height', 100);
    zb.setAttributeNS(null, 'width', 100);
  }
} //End Function

function clickChng() {
  // Targets the svg rectangle being clicked
  var recwidth = event.target.getAttribute("width");
  // if already 100px it changes it to 50px
  if (recwidth == 100) {
    event.target.setAttributeNS(null, 'height', 50);
    event.target.setAttributeNS(null, 'width', 50);
    event.target.setAttributeNS(null, 'x', 25);
    event.target.setAttributeNS(null, 'y', 25);
  }
  // otherwise, changes it back to 100px, which is the only other case
  else {
    event.target.setAttributeNS(null, 'height', 100);
    event.target.setAttributeNS(null, 'width', 100);
    event.target.setAttributeNS(null, 'x', 0);
    event.target.setAttributeNS(null, 'y', 0);
  }
}
＆＃13; 
table,
th,
td {
  border: none;
}


/* without this, the SVG element produces 5px whitespace at the bottom of itself */

.svgel {
  vertical-align: top;
}
＆＃13; 
<body onload="changeprops()">
  <table id="tab1">

    <!-- ROW 1 -->
    <tr>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
    </tr>
    <!-- ROW 2 -->
    <tr>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
    </tr>
    <!-- ROW 3 -->
    <tr>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
    </tr>
    <!-- ROW 4 -->
    <tr>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
    </tr>
    <!-- ROW 5 -->
    <tr>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
      <td>
        <svg class="svgel" width="0" height="0">
<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng()"></rect></svg>
      </td>
    </tr>
  </table>

</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

这是你想要完成的非常具体的事情。在没有触及clickChng（）函数的情况下我能想到的最好的是为每个rect添加另一个onclick事件的函数。如下所示：

<rect  class="recel" x="0" y="0" width="0" height="0" fill="rgb(0,0,255)" onclick="clickChng();checkAll();"></rect>

然后添加此功能：

    function checkAll(){
    var test = true;
    for (var i = 0; i < reca.length; i++) {
        if(reca[i].getAttributeNS(null, 'width') != 50)
            {
                test = false;
            }
        }
        if(test){
            console.log("Complete!")
        }
}

希望这有帮助。

相关问题
最新问题