Question

我想要实现的目标： 我正在编写代码，该代码确实从数据库（php和mysql）中获取类别以及其他元素。
这些元素/节点都在单选按钮的“ <label> ... </label>”中。
如果用户单击其中一个标签的单选按钮，则标签中的类别名称和img也应在另一个“ <div id="selection"> ... </div>”中的显示方式也应提高。

有效的方法： 通过单击单选按钮/标签，我已经可以获取单选按钮的值（在我的情况下，该值必须为类别ID）。

什么不起作用： 我无法获取此标签中的其他元素，也无法在其他范围内显示

非常重要！：标签中的内容是从数据库中获取的，因此是动态的！

这是我的代码的简单版本，没有php元素，但是输出应该是相同的。

function check() {
  var radioBttn = document.querySelectorAll("input[name = 'pet']");
  var countRadioBttn = radioBttn.length;

  for (i = 0; i < countRadioBttn; i++) {
    if (radioBttn[i].checked) {
      selection.innerHTML = "You selected a/n " + radioBttn[i].value + ",<br>good choice!";
    }
  }
}

*{margin: 0; padding: 0;font-family: arial; font-family: ubuntu; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
b{color: dodgerBlue;}
body{background-color: rgba(50,50,50);}
#option{width: 250px; height: 100px; background-color: rgba(255,255,255,.3); margin: 10px; padding: 10px; color: rgba(255,255,255,.9);}
#selection{width: 250px; height: 55px; background-color: rgba(100,100,100,.3); margin: 10px; padding: 10px; color: lightgreen;}

<div id="option">
  <b>Option Box</b>
  <br>

  <label>
        <input onclick="check()" type="radio" name="pet" class="rb_category" value="id:1">
        <span>Cat</span>
        <img src=""></img>
    </label>

  <br>

  <label>
        <input onclick="check()" type="radio" name="pet" class="rb_category" value="id:2">
        <span>Dog</span>
        <img src=""></img>
    </label>

  <br>

  <label>
        <input onclick="check()" type="radio" name="pet" class="rb_category" value="id:3">
        <span>Hamster</span>
        <img src=""></img>
    </label>

  <br>

  <label>
        <input onclick="check()" type="radio" name="pet" class="rb_category" value="id:4">
        <span>Mammoth</span>
        <img src=""></img>
    </label>
</div>

<div id="selection">
  No selection yet
</div>

Answer 1

你是这个意思吗？

var rads = document.querySelectorAll("input[name=pet]");
for (var i = 0; i < rads.length; i++) {
  rads[i].addEventListener("click", function() {
    var parentLabel = this.closest("label");
    document.getElementById("selection").innerHTML =
      "You selected a/n " + this.value + ",<br>good choice!" +
      "<span>" + parentLabel.querySelector("span").innerHTML + "</span>" +
      "<img src='" + parentLabel.querySelector("img").src + "'/>";
  });
};

*{margin: 0; padding: 0;font-family: arial; font-family: ubuntu; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
b{color: dodgerBlue;}
body{background-color: rgba(50,50,50);}
#option{width: 250px; height: 100px; background-color: rgba(255,255,255,.3); margin: 10px; padding: 10px; color: rgba(255,255,255,.9);}
#selection{ width: 250px; height: 55px; background-color: rgba(100,100,100,.3); margin: 10px; padding: 10px; color: lightgreen;}
label>img { height:25% }

<div id="option">
  <b>Option Box</b>
  <br>
  <label>
        <input type="radio" name="pet" class="rb_category" value="id:1">
        <span>Cat</span>
        <img src="https://lorempixel.com/output/cats-q-c-200-200-5.jpg" />
    </label>
  <br>
  <label>
        <input type="radio" name="pet" class="rb_category" value="id:2">
        <span>Dog</span>
        <img src="https://lorempixel.com/output/animals-q-c-200-200-8.jpg" />
    </label>
  <br>
  <label>
        <input type="radio" name="pet" class="rb_category" value="id:3">
        <span>Rhino</span>
        <img src="https://lorempixel.com/output/animals-q-c-200-200-1.jpg" />
    </label>

  <br>
  <label>
        <input type="radio" name="pet" class="rb_category" value="id:4">
        <span>Tiger</span>
        <img src="https://lorempixel.com/output/animals-q-c-200-200-3.jpg" />
    </label>
</div>
<br style="clear:both" />

<div id="selection">
  No selection yet
</div>

参照所选的单选按钮，如何显示元素？使用纯JavaScript

1 个答案: