突出显示所选单选按钮周围的div类？

Question

如果检查了一个单选按钮，jQuery函数会将一个类添加到一个div.card元素中？ 这不是点击，因为一个已经检查过的元素应该总是被突出显示（例如在页面加载后）： - ）

<div class="col-lg-6 form-check">
    <div class="card">
        <h3 class="card-header">Headline<small class="text-muted">Subline</small></h3>
        <label class="form-check-label">
            <img class="card-img-left" src="{{ asset('img/image.png') }}">
            <div class="card-block">
                <p class="card-text">Desciption</p>
            </div>
            <input class="hidden-xs-up" type="radio" name="character" value="1" checked>
        </label>
    </div>
</div>

Answer 1

您可以使用closest找到所选的//declaringglobalvaribales //diameteroftheface float dia1=50; //initialize position PVector and tell it where you want it to be - in this case 400,400 PVector position = new PVector(400, 400); //how many steps you want your position to move per frame float speed=4; //initialize direction vector as 0,0 - the ellipse will not move until you give it a //direction as it is initialized with no direction PVector direction = new PVector(0, 0); void setup() { size(810, 810); } void draw() { background(225); fill(225, 0, 0); stroke(0); //draw ellipse at your position PVector using the PVectors x and y values ellipse(position.x, position.y, dia1, dia1); fill(0, 225, 0); //drawing a line to indicate what direction the ellipse is heading in using the position coordinates and the position plus direction line(position.x, position.y, position.x+direction.x*4, position.y+direction.y*4); // add the direction to the position to make it move position =position.add(direction); //if the position PVector is close to sketch edges invert its direction by multiplying direction PVector by -1 if (position.x>width-dia1/2 || position.x<2+dia1/2) { direction.mult(-1); } if (position.y>height-dia1/2 || position.y<2+dia1/2) { direction.mult(-1); } } // this code to move it according to the keys W S D A void keyPressed() { //set the direction coordinates based on keypresses //also multiply the direction by speed variable so it moves at a speed set at top of script if (keyCode=='W') { direction.y = -1*speed; direction.x = 0; } if (keyCode=='S') { direction.y = 1*speed; direction.x = 0; } if (keyCode=='A') { direction.x = -1*speed; direction.y = 0; } if (keyCode=='D') { direction.x = 1*speed; direction.y = 0; } } 元素，这些元素是已检查单选按钮的父级。

.card

正如文件所说：

  

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

这是一个非常简化的演示。

$('input[type="radio"]:checked').closest('.card').addClass('checked')

$('input[type="radio"]:checked').closest('.card').addClass('checked')

.card {
  background: grey;
}

.card.checked {
  background: red;
}

当然，当复选框的状态发生变化时，您仍需要更新该类。这个简化的演示展示了如何做到这一点。

<div class="card">
  <label><input type="radio" name="character">Character 1</label>
</div>
<div class="card">
  <label><input type="radio" name="character">Character 2</label>
</div>
<div class="card">
  <label><input type="radio" name="character" checked>Character 3</label>
</div>
<div class="card">
  <label><input type="radio" name="character">Character 4</label>
</div>
<div class="card">
  <label><input type="radio" name="character">Character 5</label>
</div>

<script src="http://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous"></script>

// set initial state
var $checked = $('input[type="radio"]:checked');
$checked.closest('.card').addClass('checked');

// update on change
$('input[type="radio"]').change(function() {
  $checked.prop('checked', false).closest('.card').removeClass('checked');
  $checked = $(this);
  $checked.closest('.card').addClass('checked');
});

.card {
  background: grey;
}

.card.checked {
  background: red;
}

Answer 2

只需检查框是否已选中并使用.addClass（），如下所示：

if($('input[type="radio"]').is(':checked')) {
    $(this).closest('.card').addClass('selected');
};