javascript - 如何让侧边栏不交互？

Question

我想做一个点击加分的网页。有一个侧边栏(只是左栏)，其中有充当复选框的图像。当您点击页面时，选择一张图片可获得 1 分，选择另一张可获得 5 分...但是，我不想让侧边栏给分。这意味着当您单击它时，它只会更改所选图像，而不会添加点。除了“不在侧边栏上添加点”部分外，一切正常。我尝试了以下代码，但它不起作用:

function addPoint(number) {
  points = points + number;
  document.getElementById('points').innerHTML = points;
};

function pointsAmount() {
  chkBox1 = document.getElementById('picture1').checked;
  addPoint(chkBox1 ? 1 : 0);
  chkBox2 = document.getElementById('picture2').checked;
  addPoint(chkBox2 ? 5 : 0);
  chkBox3 = document.getElementById('picture3').checked;
  addPoint(chkBox3 ? 10 : 0);
  chkBox4 = document.getElementById('picture4').checked;
  addPoint(chkBox4 ? 20 : 0);
};

function checkPicture(x, y) {
  document.getElementById(x).checked = y;
}

function Border(x, y) {
  document.getElementById(x).style.borderColor = y;
}

function onPageload() {
  checkPicture('picture1', true);
  Border('pic1', 'yellow');
}
window.onload = onPageload;
window.onmousedown = function(e) {
  if (e.target.className != 'float-left-area') {
    pointsAmount();
  }
}
var points = 0;

body {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 0px;
}

input[type=checkbox] {
  display: none;
}

input[type=button] {
  display: none;
}

.float-left-area {
  position: absolute;
  width: 20%;
  float: left;
  background-color: #dddddd;
  border: 3px solid black;
  height: 99%;
}

.float-right-area {
  float: right;
  width: 80%;
  height: 100%;
}

.inner-left {
  font-size: 2em;
}

img.size {
  width: 3em;
  height: 3em;
}

<div class="float-left-area">
  <div class="inner-left">
    <label for="picture1"><div id="pic1" style="border: 5px solid black;"><img src="eslcc_logo2.png" alt="eslcc logo" style="float:left;" class="size" /><p align="right">1</p></div></label>
    <input id="picture1" type="checkbox" onchange="checkPicture('picture1', true)" onclick="
checkPicture('picture2', false);
checkPicture('picture3', false);
checkPicture('picture4', false); 
Border('pic1', 'yellow');
Border('pic2', 'black');
Border('pic3', 'black');
Border('pic4', 'black');" />
    <label for="picture2"><div id="pic2" style="border: 5px solid black;"><img src="imac_2.jpg" style="float:left;" class="size" alt="iMac" /><p align="right">5</p></div></label>
    <input id="picture2" type="checkbox" onchange="checkPicture('picture2', true)" onclick="
checkPicture('picture1', false);
checkPicture('picture3', false);
checkPicture('picture4', false); 
Border('pic2', 'yellow');
Border('pic1', 'black');
Border('pic3', 'black');
Border('pic4', 'black');" />
    <label for="picture3"><div id="pic3" style="border: 5px solid black;"><img src="coding_img.png" style="float:left;" class="size" alt="iMac" /><p align="right">10</p></div></label>
    <input id="picture3" type="checkbox" onchange="checkPicture('picture3', true)" onclick="
checkPicture('picture1', false);
checkPicture('picture2', false);
checkPicture('picture4', false); 
Border('pic3', 'yellow');
Border('pic1', 'black');
Border('pic2', 'black');
Border('pic4', 'black');" />
    <label for="picture4"><div id="pic4" style="border: 5px solid black;"><img src="ariane_6.jpg" style="float:left;" class="size" alt="Ariane 6"/><p align="right">20</p></div></label>
    <input id="picture4" type="checkbox" onchange="checkPicture('picture4', true)" onclick="
checkPicture('picture1', false);
checkPicture('picture2', false);
checkPicture('picture3', false); 
Border('pic4', 'yellow');
Border('pic1', 'black');
Border('pic2', 'black');
Border('pic3', 'black');" />
  </div>
</div>
<div class="float-right-area">
  <div class="inner-right">
    <p align="center">Points: <span id="points">0</span></p>

此外，请不要使用 jQuery。

Answer 1

不确定这是否是您想要的:

我删除了复选框输入中的笨重代码，并在属性中设置了不同的值(即 value、data-pic)，然后将所有操作合并到 函数添加点(数字)。

我还通过使用 for 循环修改了 function pointsAmount() 来获取所选图片的点。只有当您点击右侧区域时才会添加积分。

function addPoint(number) {
    points = points + number;
    document.getElementById('points').innerHTML = points;
}

function checkPicture(x, y) {
    document.getElementById(x).checked = y;
}

function Border(x, y) {
    document.getElementById(x).style.borderColor = y;
}

function selectPicture(selectedPic) {
    var checkboxes = document.getElementsByName('picture');
    for (var i = 0; i < checkboxes.length; i++) 
    {
        var id = checkboxes[i].id;
        var pic = checkboxes[i].getAttribute('data-pic');

        // Default state and style
        checkPicture(id, false);
        Border(pic, 'black');

        if (id == selectedPic.id)
        {                   
            checkPicture(id, true);
            Border(pic, 'yellow');
        }
    }
}

function pointsAmount() {
    var checkboxes = document.getElementsByName('picture');
    for (var i = 0; i < checkboxes.length; i++) 
    {                   
        if (checkboxes[i].checked) 
        {                       
            var value = parseInt(checkboxes[i].value);
            addPoint(value);
        }
    }
}

function onPageload() {
    checkPicture('picture1', true);
    Border('pic1', 'yellow');
}
window.onload = onPageload;

window.onmousedown = function(e) {
    if (e.target.className == 'float-right-area') {
        pointsAmount();
    }
}

var points = 0;

<div class="float-left-area">
    <div class="inner-left">
        <label for="picture1">
            <div id="pic1" style="border: 5px solid black;">
                <img src="eslcc_logo2.png" alt="eslcc logo" style="float:left;" class="size">
                <p align="right">1</p>
            </div>
        </label>
        <input id="picture1" type="checkbox" name="picture" data-pic="pic1" value="1" onclick="selectPicture(this)">

        <label for="picture2">
            <div id="pic2" style="border: 5px solid black;">
                <img src="imac_2.jpg" style="float:left;" class="size" alt="iMac">
                <p align="right">5</p>
            </div>
        </label>
        <input id="picture2" type="checkbox" name="picture" data-pic="pic2" value="5" onclick="selectPicture(this)">

        <label for="picture3">
            <div id="pic3" style="border: 5px solid black;">
                <img src="coding_img.png" style="float:left;" class="size" alt="iMac">
                <p align="right">10</p>
            </div>
        </label>
        <input id="picture3" type="checkbox" name="picture" data-pic="pic3" value="10" onclick="selectPicture(this)">

        <label for="picture4">
            <div id="pic4" style="border: 5px solid black;">
                <img src="ariane_6.jpg" style="float:left;" class="size" alt="Ariane 6">
                <p align="right">20</p>
            </div>
        </label>
        <input id="picture4" type="checkbox" name="picture" data-pic="pic4" value="20" onclick="selectPicture(this)">
    </div>
</div>
<div class="float-right-area">
    <div class="inner-right">
        <p align="center">Points: <span id="points">0</span></p>
    </div>
</div>