Question

我试图让以下内容在每个“选择 - 检查”中显示一个复选标记图像。当用户选择两张卡片中的单选按钮时，显示div。

现在，当用户点击时，两张卡都会显示一个复选标记。我尝试使用jQuery parent（），但它不允许我将复选标记移动到我想要的位置。

任何信息都会很棒！

这是一个小提琴： https://jsfiddle.net/xpvt214o/93121/

JQUERY：

$("input:radio").on('click', function () {
   if($('input:radio').is(':checked')) {
     $(this).addClass("select-check");
     $(".select-check").css("display", "");
    } else {
      $(".select-check").css("display", "none");
    }
});

HTML：

    <li class="mix" style="display: inline-block;" data-bound="">
              <div class="select-check" style="display:none;"></div>
              <div class="card card-eight card--resource not-visible"> <!--Resource-->

                   <div class="card-body">
                        <div class="card-title">Card One</div>

                        <ul>
                            <li>
                              <input type="radio" id="f-option1" name="selector-one" value="add1">
                              <label for="f-option1">Select 1</label>
                              <div class="check" style="top:60px;"><div class="inside">Add</div></div>
                            </li>

                            <li>
                              <input type="radio" id="s-option1" name="selector-one" value="add2">
                              <label for="s-option1">Select 2</label>
                              <div class="check" style="top:100px;"><div class="inside">Add</div></div>
                            </li>

                            <li>
                              <input type="radio" id="t-option1" name="selector-one" value="add3">
                              <label for="t-option1">Select 3</label>

                              <div class="check" style="top:140px;"><div class="inside">Add</div></div>
                            </li>
                      </ul>

                   </div>
              </div>
    </li>


    <li class="mix" style="display: inline-block;" data-bound="">
              <div class="select-check" style="display:none; top: 380px;"></div>
              <div class="card card-nine card--resource not-visible"> <!--Resource-->

                   <div class="card-body">
                        <div class="card-title">Card 2</div>

                        <ul>
                            <li>
                              <input type="radio" id="f-option2" name="selector-two" value="add1">
                              <label for="f-option2">Select 1</label>
                              <div class="check" style="top:60px;"><div class="inside">Add</div></div>
                            </li>

                            <li>
                              <input type="radio" id="s-option2" name="selector-two" value="add2">
                              <label for="s-option2">Select 2</label>
                              <div class="check" style="top:100px;"><div class="inside">Add</div></div>
                            </li>

                            <li>
                              <input type="radio" id="t-option2" name="selector-two" value="add3">
                              <label for="t-option2">Select 3</label>

                              <div class="check" style="top:140px;"><div class="inside">Add</div></div>
                            </li>

                      </ul>
                   </div>
              </div>
    </li>

Answer 1

我并不完全清楚你要做什么，但尝试这个功能（带注释），看看是否能让你更接近你想去的地方。

$("input:radio").on("click", function () {
    // Get the <li> containing this card and show
    // $(this) here refers to the clicked radio
    var container = $(this).closest("li.mix");
    // Display container first element .select-check
    container.find(".select-check:first").show();
    // Remove class "select-check" from each radio in container
    // (Not sure why you're using the same class for this)
    $.each(container.find("input:radio"), function () {
        // $(this) here in the loop refers to the individual radio element
        $(this).removeClass("select-check");
    });
    // Add class "select-check" to the selected radio
    $(this).addClass("select-check");
});

希望逻辑允许你修改一些东西，如果它不是你想要的东西。

（我知道这是一项正在进行中的工作，但我认为css需要更多的工作。使用固定顶部的position:absolute会导致屏幕尺寸不同的问题。

jQuery - 如何在单选按钮选中单独的单选按钮时添加图像

1 个答案: