Question

我有三个单选按钮，当访问者点击第一个收音机时，什么都不会发生，当他们点击第二个或第三个额外的字段应该出现时。

我有以下html：

asset

额外字段的CSS：

UserStateR <- read.table(text='
                      user_id             state  meanlat    meanlon countUS countS
                 1 ---teJGnwK07UO6_oJfbRw    NV 36.11559 -115.18042       1      1
                 2 --_ptq_Mp8p9oeCWFT8NJQ    NV 36.11559 -115.18042       1      1
                 3 --0HEXd4W6bJI8k7E0RxTA    AZ 33.47984 -111.97986       2      1
                 4 --0KsjlAThNWua2Pr4HStQ    QC 45.50970  -73.58966       6      1
                 5 --0mI_q_0D1CdU4P_hoImQ    NV 36.11559 -115.18042       1      1
                 6 --106arHH4D3fLenTl3YZA    NV 36.11559 -115.18042       1      1', header=TRUE)
library(igraph)
g <- graph_from_data_frame(UserStateR[,1:2])
V(g)$type <- ifelse(names(V(g)) %in% UserStateR$user_id, 'user', 'state')
V(g)$label <- ifelse(V(g)$type == 'user', '', names(V(g)))
V(g)$size <- ifelse(V(g)$type == 'user', 10, 20)
V(g)$color <- ifelse(V(g)$type == 'user', 'red', 'cyan')
plot(g)

我想在选择单选按钮2或3时显示额外的字段。我有以下脚本：

<p class="input-group input-radio input-field-workshop_wenst_u_een_factuur"
  <label for="workshop_wenst_u_een_factuur">
    Wenst u een factuur?
    <span class="em-form-required">*</span>
  </label>
  <span class="input-group">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" val="Ik heb geen factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" val="Ik heb wel een factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" val="Mijn werkgever zal betalen." type="radio">
  </span>
</p>

当我选择第二个单选按钮时，这可以完成工作，如何在选择第三个单选按钮时使其可见，然后在再次选择第一个单选按钮时再次消失？

Answer 1

对现有代码的最简单更改是测试单击项的值是否等于第一个单选按钮，如果是，则隐藏字段，否则显示它们。

即改变这一点：

$('.input-field-workshop_gelijk_adres').css('display',
           ($(this).val() === 'Ik heb wel een factuur nodig.') ? 'block':'none'),
// and the others

......对此：

$('.input-field-workshop_gelijk_adres').css('display',
           ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block'),
// and the others

但如果你通过一次选择所有相关字段在一行中完成所有操作会更简单，注意它对于jQuery选择器（如CSS选择器）列出多个类是有效的：

$("input[name='workshop_wenst_u_een_factuur']").click(function () {

  $('.input-field-workshop_gelijk_adres, .input-field-factuur_bedrijf, .input-field-factuur_naam_contactpersoon, .input-field-factuur_email_contactpersoon, .input-field-factuur_straat, .input-field-factuur_nummer, .input-field-factuur_bus, .input-field-factuur_postcode, .input-field-factuur_gemeente, .input-field-factuur_land, .input-field-factuur_btw-nummer, .input-field-factuur_opmerkingen')
    .css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block');

});

.input-field-workshop_gelijk_adres, .other-classes-here { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="input-group input-radio input-field-workshop_wenst_u_een_factuur"
  <label for="workshop_wenst_u_een_factuur">
    Wenst u een factuur?
    <span class="em-form-required">*</span>
  </label>
  <span class="input-group">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb geen factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb wel een factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Mijn werkgever zal betalen." type="radio">
  </span>
</p>
<div class="input-field-workshop_gelijk_adres">Sample "field"</div>

话虽如此，如果您将所有相关字段都放在一个公共类中，然后在JS中引用该类，那么维护起来会容易得多：

$('.common-class-name-here')
    .css('display', ($(this).val() === 'Ik heb geen factuur nodig.') ? 'none':'block');

如果你想隐藏并显示有点发烧友，你可以使用.slideDown()和.slideUp()方法，而不是用display手动设置.css()属性：< / p>

$('.input-field-whatever...')
    [this.value === 'Ik heb geen factuur nodig.' ? 'slideUp':'slideDown']();

展开并运行以下内容以查看上下文：

$("input[name='workshop_wenst_u_een_factuur']").click(function () {

  $('.input-field-workshop_gelijk_adres, .input-field-factuur_bedrijf, .input-field-factuur_naam_contactpersoon, .input-field-factuur_email_contactpersoon, .input-field-factuur_straat, .input-field-factuur_nummer, .input-field-factuur_bus, .input-field-factuur_postcode, .input-field-factuur_gemeente, .input-field-factuur_land, .input-field-factuur_btw-nummer, .input-field-factuur_opmerkingen')
    [this.value === 'Ik heb geen factuur nodig.' ? 'slideUp':'slideDown']();

});

.input-field-workshop_gelijk_adres, .other-classes-here { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="input-group input-radio input-field-workshop_wenst_u_een_factuur"
  <label for="workshop_wenst_u_een_factuur">
    Wenst u een factuur?
    <span class="em-form-required">*</span>
  </label>
  <span class="input-group">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb geen factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Ik heb wel een factuur nodig." type="radio">
    <input class="workshop_wenst_u_een_factuur" name="workshop_wenst_u_een_factuur" value="Mijn werkgever zal betalen." type="radio">
  </span>
</p>
<div class="input-field-workshop_gelijk_adres">Sample "field"</div>

（注意：在你的HTML val="..."中，它应该是value="..."。）

在不同的单选按钮值上显示额外的字段

1 个答案: