Question

我有 12 个 <a> 标签，它们链接到图像。我想要做的是将所有这些连接在一个 if 中作为一个 .clicked == true。由于某种原因，它不起作用，所以我还有另一个问题。

我的 <a> 标签示例。

<div id="container">
        <div id="slider">
        </div>
        
        <div id="wypelniacz">
              <a href="javascript: text(1);"><img style="top: 22%; right: 60%;" alt="" src="greenapple.png" class="apl" id="apple1" onclick="imageSwap(1) ; this.onclick=null;"></a>
        </div>
</div>

JS

function imageSwap(id)
        {           
            document.getElementById("apple" + id).src = "redapple.png";
        }

为了更容易解释，我发布了一张我在做什么的图片。当苹果没有被点击时，它保持绿色，但当我点击它时，它会变成红色。然后，当所有 12apples 都是红色时，整个 div 内容将被删除并交换为一张图像。我怎么可能这样做？提前致谢！

Answer 1

所以为属性添加一个类并检查你有多少

# # if you downloaded llvm manually above, replace with your chosen NEW_PATH/clang
# LLVM_LOC = /usr/local/opt/llvm
# CC=$(LLVM_LOC)/bin/clang -fopenmp
# CXX=$(LLVM_LOC)/bin/clang++ -fopenmp
# # -O3 should be faster than -O2 (default) level optimisation ..
# CFLAGS=-g -O3 -Wall -pedantic -std=gnu99 -mtune=native -pipe
# CXXFLAGS=-g -O3 -Wall -pedantic -std=c++11 -mtune=native -pipe
# LDFLAGS=-L/usr/local/opt/gettext/lib -L$(LLVM_LOC)/lib -Wl,-rpath,$(LLVM_LOC)/lib
# CPPFLAGS=-I/usr/local/opt/gettext/include -I$(LLVM_LOC)/include -I/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include

# GCC (Official GNU fortran) ver

 LOC = /usr/local/gfortran
 CC=$(LOC)/bin/gcc -fopenmp
 CXX=$(LOC)/bin/g++ -fopenmp
 CXX11 = $(LOC)/bin/g++ -fopenmp # for fst package
 
 CFLAGS=-g -O3 -Wall -pedantic -std=gnu99 -mtune=native -pipe
 CXXFLAGS=-g -O3 -Wall -pedantic -std=c++11 -mtune=native -pipe
 LDFLAGS=-L$(LOC)/lib -Wl,-rpath,-I$(LOC)/lib
 CPPFLAGS=-I$(LOC)/include -I/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include

或者只是使用 html 和 css

function imageSwap(id) {
  var img = document.getElementById("apple" + id);
  img.src = "redapple.png";
  img.classList.add("selected");
  var count = document.querSelectorAll(".selected").length;
  console.log(count);
}

document.querySelector(".tree").addEventListener("change", function(evt) {
  const checked = document.querySelectorAll(".apple:checked").length;
  console.log(checked);
  console.log(evt.target.form.checkValidity());
});

.apple {
  display: none;
}

.apple + label {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url(http://placekitten.com/g/100/100);
}

.apple:checked + label {
  background-image: url(http://placekitten.com/100/100);
}

Answer 2

使用事件委托，即我将点击事件附加到'.container'，并使用'event.target'来操作目标苹果
切换目标苹果类以切换背景颜色
检查所有苹果，如果没有'.red'，则切换到一个新图像（这里我只是将'.red'类全部删除）

document.addEventListener('DOMContentLoaded', ev => {
  const apples = [...document.querySelectorAll('.apple')]
  const container = document.querySelector('.container')
  container.addEventListener('click', ev => {
    if (ev.target.matches('.apple')) {
      ev.preventDefault()

      ev.target.classList.toggle('red')
      const apples = [...container.querySelectorAll('.apple')]
      if (apples.every(apple => apple.classList.contains('red'))) {
        apples.forEach(apple => apple.classList.remove('red'))
      }
    }
  })
}, false)

  div {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
  }

  .apple {
    width: 5rem;
    height: 5rem;
    border-radius: 5rem;
    background: green;
  }

  .green {
    background: green;
  }

  .red {
    background: red;
  }

  <div class="container">
    <a href="#" data-id="0" class="apple"></a>
    <a href="#" data-id="1" class="apple"></a>
    <a href="#" data-id="2" class="apple"></a>
    <a href="#" data-id="3" class="apple"></a>
    <a href="#" data-id="4" class="apple"></a>
    <a href="#" data-id="5" class="apple"></a>
    <a href="#" data-id="6" class="apple"></a>
    <a href="#" data-id="7" class="apple"></a>
    <a href="#" data-id="8" class="apple"></a>
    <a href="#" data-id="9" class="apple"></a>
    <a href="#" data-id="10" class="apple"></a>
    <a href="#" data-id="11" class="apple"></a>
  </div>

连接几个“if”条件

2 个答案: