Question

我可以让我的功能工作，当它不在一个锚标签内，我知道如何将一个onclick事件添加到一个链接，但它不工作但是当我把它拿出我的标签它显示字母S和我点击它它的工作正常，但我希望它与我漂亮的单选按钮一起使用不仅仅是字母s，任何想法？拜托，谢谢

＆＃13;

            function displayForm(c){
                if(c.value.includes("youth")){
                    document.getElementById("adult").style.visibility='visible';
                    document.getElementById("youth").style.visibility='hidden';
                }
                else if(c.value.includes("ladies")){
                    document.getElementById("adult").style.visibility='hidden';
                    document.getElementById("youth").style.visibility='visible';
                }
                else if(c.value.includes("adult")){
                    document.getElementById("adult").style.visibility='hidden';
                    document.getElementById("youth").style.visibility='visible';}
                else{
                }
            
            }

＆＃13;

          
     
     <div class="sizes">
       <h3>Available sizes</h3>
        <hr>
         <h4>Youth Sizes</h4>
          <%size_price.each do |item| %>
           <%if item['size'] == "youth small" %>
            <label for="<%=item['size']%>">
                                            S
          <input type="radio" id="<%=item['size']%>" name="size" value="youth small" class="size-input" data-price="<%=item['price']%>" onclick="displayForm(this)">
           </label>
           <%elsif item['size'] == "youth medium" %>
          <label for="<%=item['size']%>">
         <a href="#">M</a>
          <input type="radio" id="<%=item['size']%>" name="size" value="youth medium" class="size-input" data-price="<%=item['price']%>">
          </label>
.

      <p style="visibility:hidden" id="adult">
       Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" >
                        <br>
       Line 2: <input id="line2"  name="line2" placeholder="Your custom message" type="text" maxlength="14">
                        <br>
       Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14">
                        <br>
       Line 4: <input id="line4"  name="line4" placeholder="Your custom message" type="text" maxlength="14">
                        </p>
                        
                        <p style="visibility:hidden" id="youth">
     Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" >
                        <br>
     Line 2: <input id="line2"  name="line2" placeholder="Your custom message" type="text" maxlength="14">
                        <br>
    Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14">
                        <br>
    Line 4: <input id="line4"  name="line4" placeholder="Your custom message" type="text" maxlength="14">
                        </p>

＆＃13;

Answer 1

我已在radio button M添加了代码段，您将获得一个输入框列表。

我已在此行添加onclick事件进行了更改。

<input type="radio" id="<%=item['size']%>" name="size" value="youth medium" class="size-input" data-price="<%=item['price']%>"  onclick="displayForm(this)">

        function displayForm(c){
            if(c.value.includes("youth")){
                document.getElementById("adult").style.visibility='visible';
                document.getElementById("youth").style.visibility='hidden';
            }
            else if(c.value.includes("ladies")){
                document.getElementById("adult").style.visibility='hidden';
                document.getElementById("youth").style.visibility='visible';
            }
            else if(c.value.includes("adult")){
                document.getElementById("adult").style.visibility='hidden';
                document.getElementById("youth").style.visibility='visible';}
            else{
            }

        }

<div class="sizes">
   <h3>Available sizes</h3>
    <hr></hr>
     <h4>Youth Sizes</h4>
      <%size_price.each do |item| %>
       <%if item['size'] = "youth small" %>
        <label for="<%=item['size']%>">
                                        S
      <input type="radio" id="<%=item['size']%>" name="size" value="youth small" class="size-input" data-price="<%=item['price']%>" onclick="displayForm(this)">
       </label>
       <%elsif item['size'] = "youth medium" %>
      <label for="<%=item['size']%>">
     <a href="#">M</a>
      <input type="radio" id="<%=item['size']%>" name="size" value="youth medium" class="size-input" data-price="<%=item['price']%>"  onclick="displayForm(this)">
      </label>
          <p style="visibility:hidden" id="adult">
   Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" >
                    <br>
   Line 2: <input id="line2"  name="line2" placeholder="Your custom message" type="text" maxlength="14">
                    <br>
   Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14">
                    <br>
   Line 4: <input id="line4"  name="line4" placeholder="Your custom message" type="text" maxlength="14">
                    </p>

                    <p style="visibility:hidden" id="youth">
 Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" >
                    <br>
 Line 2: <input id="line2"  name="line2" placeholder="Your custom message" type="text" maxlength="14">
                    <br>
Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14">
                    <br>
Line 4: <input id="line4"  name="line4" placeholder="Your custom message" type="text" maxlength="14">
                    </p>

如何让我的js函数使用锚链接/单选按钮

1 个答案: