Question

我有这个带有两个按钮的简单php代码，可在while循环中打开引导程序模式

模态当前正在运行，但更改功能上的jquery脚本仅在第一个模态上有效，而在第二个模态上不起作用

如何修改on change jQuery脚本，使其在两种模式下均能正常工作？

谢谢

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <script>
$(document).ready(function(){
    $('#level').on('change', function() {
      if ( this.value == '1')
      {
        $("#level1").show();
        $("#level2").hide();
      }
       else if ( this.value == '2')
      { 
       $("#level1").hide();
        $("#level2").show();  
      }
      else
      {

      }
    });
});
</script>


  <?php
  $x = 1; 

while($x <= 2) {

echo "<button type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal$x' data-id='$x' id='$x'>Open Modal $x</button><br />";


?>
<!-- Modal -->
<div id="myModal<?php echo $x?>" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">

     <?php echo $x; ?>
       <div class='form-group'>
<label for='level'> Please select level:</label>
<select class='form-control' id='level' name='level'>
<option value=''>Select</option>
<option value='1'>Level 1</option>
  <option value='2'>Level 2</option>
  </select>

</div>

<div style='display:none;' id='level1'>
 This is Level 1
</div>

<div style='display:none;' id='level2'>
This is Level 2
</div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<?php
  $x++;
} 

?>

Answer 1

由于level，我检查了所有以$('[id^=level]')开头的id。我还为ID级添加了一个唯一值，例如id='level<?php echo $x; ?>'。 ID必须是唯一的。

完整代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
    $('[id^=level]').on('change', function() {
        var id = $(this).attr('id').match(/\d+/);
        if ( this.value == '1'){
            $("[id^=level1_txt"+id+"]").show();
            $("[id^=level2_txt"+id+"]").hide();
        }else if ( this.value == '2'){ 
            $("[id^=level1_txt"+id+"]").hide();
            $("[id^=level2_txt"+id+"]").show();  
        }else{
            //Hide when not selected
            //$("[id^=level1_txt]").hide();
            //$("[id^=level2_txt]").hide();
        }
    });
});
</script>


<?php
$x = 1; 
while($x <= 2) {
    echo "<button type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal$x' data-id='$x' id='$x'>Open Modal $x</button><br />";
?>
<!-- Modal -->
<div id="myModal<?php echo $x?>" class="modal fade" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
        <?php echo $x; ?>
        <div class='form-group'>
            <label for='level<?php echo $x; ?>'> Please select level:</label>
            <select class='form-control' id='level<?php echo $x; ?>' name='level'>
                <option value=''>Select</option>
                <option value='1'>Level 1</option>
                <option value='2'>Level 2</option>
            </select>
        </div>
        <div style='display:none;' id='level1_txt<?php echo $x; ?>'>
            This is Level 1
        </div>
        <div style='display:none;' id='level2_txt<?php echo $x; ?>'>
            This is Level 2
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>

</div>
</div>

<?php
    $x++;
} 

?>

Answer 2

它仅与第一个模式一起使用，因为您使用了 id ，并且您必须知道ID应该是唯一的，因此jQuery会将您的侦听器附加到仅第一个<select>，并且只会显示和隐藏第一个#levelX。

尝试使用类而不是ID更新代码。

Answer 3

我对代码进行了一些更改，请检查，如果您仍然遇到问题，请告知我。

<script>
$(document).ready(function(){
    $('#level').on('change', function() {
      if ( this.value == '1')
      {
        $("#level1").show();
        $("#level2").hide();
      }
       else if ( this.value == '2')
      { 
       $("#level1").hide();
        $("#level2").show();  
      }
      else
      {

      }
    });

    $('.open-modal').on('click', function() {
        const index = $(this).data('index);
      $("#myModal"+index).show();
      $(this).find("#level1").hide();
      $(this).find("#level2").hide();
    });
});
</script>


<?php
$x = 1;
while($x <= 2) {

    echo "<button type='button' class='btn btn-info open-modal' data-index='".$x."' data-toggle='modal' data-target='#myModal$x' data-id='$x' id='$x'>Open Modal $x</button><br />";


    ?>
    <!-- Modal -->
    <div id="myModal<?php echo $x?>" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">

        <?php echo $x; ?>
        <div class='form-group'>
    <label for='level'> Please select level:</label>
    <select class='form-control' id='level' name='level'>
    <option value=''>Select</option>
    <option value='1'>Level 1</option>
    <option value='2'>Level 2</option>
    </select>

    </div>

    <div style='display:none;' id='level1'>
    This is Level 1
    </div>

    <div style='display:none;' id='level2'>
    This is Level 2
    </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>

    </div>
    </div>

    <?php
  $x++;
} 

?>

在while循环中使用bootstrap modal的change function上的jQuery

3 个答案: