带有Icon的Ruby Checkbox现在在切换时显示/隐藏div

请原谅我提出这个问题,但我一直在试着解决这个问题,但我无法理解我搞砸了 . 我已经检查了很多关于SO的答案,建议在Jquery中使用attr或道具这对我不起作用,所以我想我可能会遇到其他一些问题 .

我有ruby代码,我有一个图标 . 当我点击这个图标时,我想显示/隐藏另一个div .

我的ROR代码:

<div class="choice <%= 'active' if listing.payment_term_shortterm == 'on' %>" data-toggle="wizard-checkbox">

    <%= form.check_box :payment_term_shortterm,  id: "payment_term_shortterm_test" %>

    <div class="card card-checkboxes card-hover-effect">
        <i class="ti-home"></i>
        <p>Small Time</p>
    </div>

</div>

以上内容在我的网站中创建了这个图标,如下所示:

我只是希望如果点击小时间它会显示另一个div . 到目前为止我的Jquery:

$(function () {
    $("#payment_term_shortterm_test").click(function () {
        if ($(this).is(":checked")) {
            $("#SmallTimeShow").show();
        } else {
            $("#SmallTimeShow").hide();
        }
    });
});

这个jquery应该显示以下div:

<div id="SmallTimeShow" style="display: none;">

    <div class="form-group">
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                <p> Hi Loan for Small time.</p>
            </div>
        </div>
    </div>
</div>

我尝试了很多东西,比如在jquery中使用props或attr,但它也没有用 .

编辑

这是浏览器检查元素中出现的内容:

回答(1)

2 years ago

您可以尝试使用display'block'并显示'none',如下所述:

$('#payment_term_shortterm_test').change(function() {
  if($(this).is(":checked")) {
    $("#SmallTimeShow").css('display','block');
  }
  else{
    $("#SmallTimeShow").css('display','none');
  }       
});