Question

好吧，所以我搜索了很多相关问题并尝试了解决方案，但是，当我使用谷歌浏览器从我的本地计算机加载它时，我仍然无法使用它，但是当我复制和粘贴时它仍然有用在浏览器页面中加载到控制台的脚本。

我在html.erb代码中有一个脚本：

$(document).ready(function(){
  $(document).on("click","#17_43",function() {
    if($("#17_43").prop('checked', true)){
      document.getElementById("18").style.display = "block";
      document.getElementById("18_45").style.display = "block";
    }
   });
 });

基本上，此代码的作用是动态创建脚本以显示以下问题和输入字段，具体取决于某人是否在上一个问题的单选按钮中选择“是”。

以下是输出到浏览器时脚本的示例：

<p> Hello there :) </p>
<fieldset id="17">
   Yes
   <input type="radio" value="Yes" name="17" id="17_43">
   No
   <input type="radio" value="No" name="17" id="17_44">
</fieldset>
<p id="18" style="display: none;"> Thanks for helping!!! </p>
<input type="text" id="18_45" placeholder="HELLO" style="display: none;">

它控制的以下HTML输入和内容：

<div class="foo">
<h3>Need this text_1</h3>
    <table class="thesamename">
    <tbody>
    <tr>  
        <td class="tmp_year">
          <a href="/link1">45767</a>        
        </td>
        <td class="tmp_outcome">
            <b>Win_1</b><br>
            <span class="tmp_category">TEST_1</span>
        </td>
    </tr>
    <tr>  
        <td class="tmp_year">
          <a href="/link1">1232004</a>        
        </td>
        <td class="tmp_outcome">
            <b>Win_2</b><br>
            <span class="tmp_category">TEST_2</span>
        </td>
    </tr>
    <tr>  
        <td class="tmp_year">
          <a href="/link1">122004</a>        
        </td>
        <td class="tmp_outcome">
            <b>Win_3</b><br>
            <span class="tmp_category">TEST_3</span>
        </td>
    </tr>
    </tbody>  
<h3>Need this text_2</h3>
        <table class="thesamename">
    <tbody>
       <td class="tmp_year">
          <a href="/link1">234</a>        
        </td>
        <td class="tmp_outcome">
            <b>Win_E</b><br>
            <span class="tmp_category">TEST_E</span>
        </td>
    </tr>
    <tr>  
        <td class="tmp_year">
          <a href="/link1">3476</a>        
        </td>
        <td class="tmp_outcome">
            <b>Win_C</b><br>
            <span class="tmp_category">TEST_C</span>
        </td>
    </tr>
    </tbody>
<h3>Need this text_3</h3>
        <table class="thesamename">
    <tbody>
    <tr>  
        <td class="tmp_year">
          <a href="/link1">85567</a>        
        </td>
        <td class="tmp_outcome">
            <b>Win_T</b><br>
            <span class="tmp_category">TEST_T</span>
        </td>
    </tr>
    <tr>  
        <td class="tmp_year">
          <a href="/link1">435656</a>        
        </td>
        <td class="tmp_outcome">
            <b>Win_A</b><br>
            <span class="tmp_category">TEST_A</span>
        </td>
    </tr>
    <tr>  
        <td class="tmp_year">
          <a href="/link1">980</a>        
        </td>
        <td class="tmp_outcome">
            <b>Win_Z</b><br>
            <span class="tmp_category">TEST_Z</span>
        </td>
    </tr>
    </tbody>

非常感谢任何形式的帮助！

Answer 1

首先，您是否检查过标签是否正确填充＆lt;％= ... =＆gt;被放置了吗？

其次，这不是你问题的答案，但我认为你应该使用不同的结构来做到这一点。

就像你的html而不是用数字“ids”渲染div一样，你会用类似“问题”的类来渲染div，并添加一个数据属性，例如“data-id”，data-id反映了问题id到任何字段，或用“id _＃{id}”

等ID标记输入

然后你可以有一个js文件：

$('.question').on('click', function() {
  var id = $(this).data('id');
  if ($('#checkbox_'+id).prop('checked', true)){
    document.getElementById('p_'+id).style.display = "block";
    document.getElementById('input_text_'+id).style.display = "block";
  }
});

如果您要动态添加问题和其他内容，您可能需要创建一个绑定点击处理程序的函数，例如：

function bindQuestions() {
  $('.question').on('click', function() { 
     ........ 
  });
}

然后，无论何时将新元素加载到dom中，都可以运行“bindQuestions（）;”

Answer 2

我想我已修好它，感谢gaetanoM指出它。

我在HTML代码中有一些冲突的ID，我没有注意到在执行脚本时引起了一些冲突，之后我注意到，由于这一点，我的部分代码在选择隐藏的单选按钮时执行相反的操作输入和问题字段与ID等相冲突。

非常感谢你的帮助！

JQuery不在html.erb文件中工作，但在Console中工作

2 个答案: