jQuery显示div当单击单选按钮时使用id而不是value的div

时间:2018-12-07 12:50:39

标签: javascript jquery html css

此代码有效,但不像我想要的那样。现在需要打开,我希望它使用 id 来打开。我不能一直使用“ Ja” 作为值,因为我有多个值的“ Ja”(在下面的代码中未显示)。

    $( document ).ready( function () {
      $( "input[name=group8" ).change( function() {
        var test8 = $( this ).val();
        $( ".desc" ).hide();
        $( "#" + test8 ).show();
      } );
    } );
.desc {
      display: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form10" id="my_form10" method="post" action="" >
      <h5>Wil je keukenplinten laten inkorten na het leggen van de vloer?</h5>
      <div class="radio8">
        <div class="janee">
          <input id="JA7" type="radio" name="group8" value="Ja">
          <label for="JA7" class="form-field__radio__label">Ja, meerprijs € 20.00 per plint</label><br>
          <input id="NEE7" type="radio" name="group8" value="Nee">
          <label for="NEE7">Nee</label>
        </div>
      </div>
    </form>
    
    <form id="keukenplinten">
      <div id="Ja" class="desc" style="float: inherit;">
        <h5>Hoeveel keukenplinten wil je laten inkorten?</h5>
        <input type="number" id="keukenplintenInkorten" name="keukenplinten">
      </div>
    </form>

6 个答案:

答案 0 :(得分:0)

您可以尝试使用$(this).attr('id')而不是$(this).val()

答案 1 :(得分:0)

我想您希望'test8'变量采用选定ID的元素的值,在这种情况下,您可以使用:

var test8 = $( this ).attr('id')

您可以在此处阅读详细说明: How can I get the ID of an element using jQuery?

答案 2 :(得分:0)

使用这种方式

$( document ).ready( function () {
  $( "input[name=group8" ).change( function() {
    var test8 = $(this).attr('id')
    $( ".desc" ).hide();
    $( "#form_"  + test8 ).show();
  } );
} );

<form id="keukenplinten">
  <div id="form_JA7" class="desc" style="float: inherit;"> <!-- Change ID this Way-->
    <h5>Hoeveel keukenplinten wil je laten inkorten?</h5>
    <input type="number" id="keukenplintenInkorten" name="keukenplinten">
  </div>
</form>

http://jsfiddle.net/sj2bm5av/2/

答案 3 :(得分:0)

如果要使用clicked元素的ID属性进行下一步,可以使用以下命令:

  $( document ).ready( function () {
  $( "input[name=group8" ).change( function() {
    var test8 = $( this ).attr("id");
    $( ".desc" ).hide();
    $( "#" + test8 ).show();
  } );
} );

但是在这里,test8将具有ID为“ Ja7”的元素,该元素试图调用$( "#Ja7" )。该ID用于无线电元素。因此,您需要为div使用其他ID,即“ div_Ja7

P.S。每个元素都有一个唯一的ID。您不能将相同的ID分配给多个元素。

答案 4 :(得分:0)

我建议您在data-trigger元素中添加一个.desc(用我的名字命名)属性。

这表示,哪个元素必须具有哪个值才能显示此元素

jQuery(function($) {
  $("input[name=group8").change(function() {
    var id = $(this).attr('id'); 
    var val = $(this).val();
    var selector = '[data-trigger="#' + id + ':' + val + '"]'
    $(".desc").hide();
    $(selector).show();
  });  
});
.desc {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form10" id="my_form10" method="post" action="">
  <h5>Wil je keukenplinten laten inkorten na het leggen van de vloer?</h5>
  <div class="radio8">
    <div class="janee">
      <input id="JA7" type="radio" name="group8" value="Ja">
      <label for="JA7" class="form-field__radio__label">Ja, meerprijs € 20.00 per plint</label><br>
      <input id="NEE7" type="radio" name="group8" value="Nee">
      <label for="NEE7">Nee</label>
    </div>
  </div>
</form>

<form id="keukenplinten">
  <div id="Ja" data-trigger="#JA7:Ja" class="desc" style="float: inherit;">
    <h5>Hoeveel keukenplinten wil je laten inkorten?</h5>
    <input type="number" id="keukenplintenInkorten" name="keukenplinten">
  </div>
</form>

答案 5 :(得分:0)

我建议您在“输入”上引入新属性,例如“数据ID”(它将为多个输入分配相同的值),请参见以下代码

 <form name="form10" id="my_form10" method="post" action="" >
  <h5>Wil je keukenplinten laten inkorten na het leggen van de vloer?</h5>
  <div class="radio8">
    <div class="janee">
      <input id="JA7" data-id="ABC1" type="radio" name="group8" value="Ja">
      <label for="JA7" class="form-field__radio__label">Ja, meerprijs € 20.00 per 
       plint</label><br>
      <input id="NEE7" data-id="ABC2" type="radio" name="group8" value="Nee">
      <label for="NEE7">Nee</label>
    </div>
  </div>
</form>
<form id="keukenplinten">
  <div id="ABC1" class="desc" style="float: inherit;">
    <h5>Hoeveel keukenplinten wil je laten inkorten?</h5>
    <input type="number" id="keukenplintenInkorten" name="keukenplinten">
  </div>
</form>

并在Jquery中使用:

    $( document ).ready( function () {
      $( "input[name=group8" ).change( function() {
        var test8 = $( this ).attr("data-id");
        $( ".desc" ).hide();
        $( "#" + test8 ).show();
      });
   } );