Question

我的代码的超级简单表示：

$("#ddlMth").hide();
$("input[type='radio']").change(function() {

  if ($(this).val() == "delivery-yes") {
    $("#ddlMth").show();
  } else {
    $("#ddlMth").hide();
  }
});

我需要向<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label><input type="radio" name="radioFrequency" id="radioFrequency-0" value="delivery-yes" /> Yes.</label> <label><input type="radio" name="radioFrequency" id="radioFrequency-0" /> No.</label> <div class="controls" id="ddlMth"> <label name="ddlMth" class="car-list-step-label" for="country">Test</label> <input name="ddlMth" type="text" placeholder="e.g £50" class="form-control car-list-input"> </div>添加一个类，但这对我来说很难。有没有一种简单的方法可以在javascript中做到这一点？我知道我可以选择<div class = "parent_class"> <a href="#"> <img src="something.jpg"> </a> </div>，但我认为这并不适用。

Answer 1

如果您使用的是jQuery，则可以使用img (ancestor > descendent)访问.parent_class img元素，然后使用addClass添加自定义类：

$('.parent_class img').addClass('myclass');

.myclass {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent_class">
  <a href="#">
    <img src="http://placekitten.com/200/300">
  </a>
</div>

Answer 2

纯JS（没有jQuery ）中的工作示例：

// first you would like to get reference to the parent
const parent = document.querySelector('.parent_class');

// then you get reference to the img nested under parent
const img = parent.querySelector('img'); // this will return reference to the first child img of the parent element

img.classList.add('your-class-goes-here'); // add the class to the element

将此解决方案插入在某种情况下（即按钮单击或“ DOMContentLoad”事件）执行的功能。

Answer 3

这是一个普通的JS解决方案：

addclass = function() {
  var e = document.querySelectorAll('.parent_class img')[0];
  e.classList.add("my");
}

.my {
 border: 3px solid red; 
}

<div class = "parent_class">
  <a href="#"> 
    <img src="https://picsum.photos/30/30">
  </a>
 </div>
  
<button onclick="addclass();">Add class</button>

Answer 4

您可以使用jQuery（Get Started）和addClass()方法（addClass() Method）。

将类添加到嵌套的img

4 个答案: