Question

这是我的代码：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>
    window.onload = function() {
        //Range
        var val = $('#slider').val();
        output = $('#output');
        output.html(val);
    
        $('#slider').on('change', function() {
          output.html(this.value);
        });
    
        $('#Main').change(function() {
          if (this.value == "a") {
            $('#slider').prop({
              'min': 0,
              'max': 1
            });
          }
          if (this.value == "b") {
            $('#slider').prop({
              'min': 0,
              'max': 20
            });
          }
          if (this.value == "c") {
        	var style = $('#slider').attr('style'),
            textbox = $(document.createElement('textarea')).attr('style',style);
       		$('#slider').replaceWith(textbox);
          }       
          $('#slider').val(0);
          output.html('0');
        });
      }
    </script>
      <body>
        <form>
          <fieldset>
            <legend>Title</legend>
            <p>
              <label>
                Select modifier:
              </label>
              <select id="Main" onchange="changeRange('10', '80')">
              	<option value="default">select an option</option>
                <option value="a">Option A</option>
                <option value="b">Option B</option>            
                <option value="c">Option C</option>                               
              </select>
            </p>
            <p>
              <label for="range">Select amount:</label>
              <input type="range" min="0" max="9000" id="slider" value="0" name="range"> <span id="output"></span>
            </p>
          </fieldset>
        </form>
      </body>

＆＃13;

选项A和B的代码目前工作正常。我希望选项C显示一个文本框而不是一个滑块，这也很好。但是，在选项C之后选择选项B时，文本框仍然保留。我只希望文本框显示在选项C中。我已尝试将其添加到if (this.value == "c") {

else {
            var dstyle = $('#slider').attr('dstyle'),
            range = $(document.createElement('range')).attr('dstyle',style);
            $('#slider').replaceWith(range);
        }

然而，这不起作用。请帮我解决这个问题。感谢。

Answer 1

请找到下面的工作解决方案。我使用switch代替if并在HTML中创建了textarea。之后，只需显示/隐藏textarea和slider。

＆＃13;

window.onload = function() {
  //Range
  var val = $('#slider').val();
  output = $('#output');
  output.html(val);

  $('#slider').on('change', function() {
    output.html(this.value);
  });

  function showSlider() {
    $('#slider').show();
    $('#textInput').hide();
  }

  function showTextInput() {
    $('#slider').hide();
    $('#textInput').show();
  }

  $('#Main').change(function() {
    switch (this.value) {
      case 'a':
        $('#slider').prop({
          'min': 0,
          'max': 1
        });
        showSlider();
        break;
      case 'b':
        $('#slider').prop({
          'min': 0,
          'max': 20
        });
        showSlider();
        break;
      case 'c':
        showTextInput();
        break;
      default:
    }
    $('#slider').val(0);
    output.html('0');
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>Title</legend>
    <p>
      <label>
                Select modifier:
              </label>
      <select id="Main">
              	<option value="default">select an option</option>
                <option value="a">Option A</option>
                <option value="b">Option B</option>            
                <option value="c">Option C</option>                               
              </select>
    </p>
    <p>
      <label for="range">Select amount:</label>
      <input type="range" min="0" max="9000" id="slider" value="0" name="range">
      <textarea id="textInput" style="display:none"></textarea>
      <span id="output"></span>
    </p>
  </fieldset>
</form>

＆＃13;

Answer 2

每次选择选项c时，不要创建新元素，只需隐藏和取消隐藏即可。这是我创建的纯JavaScript代码：

＆＃13;

var select = document.querySelector('select');
var slider = document.querySelector('input[type="range"]');
var textarea = document.querySelector('textarea');
select.addEventListener('change', function() {
  var val = select.value;
  console.log(val)
  if (val == 'a') {
    slider.style.display = "initial";
    textarea.style.display = "none";
    slider.setAttribute('min', 0);
    slider.setAttribute('max', 1);
  }
  else if (val == 'b') {
    slider.style.display = "initial";
    textarea.style.display = "none";
    slider.setAttribute('min', 0);
    slider.setAttribute('max', 20);
  }
  else if (val == 'c') {
    slider.style.display = "none";
    textarea.style.display = "initial";
    slider.setAttribute('min', 0);
    slider.setAttribute('max', 1);
  }
});

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <select>
      <option value="a">Option A</option>
      <option value="b">Option B</option>            
      <option value="c">Option C</option> 
    </select>
    <input type="range" min="0" max="1">
    <textarea style="display:none"></textarea>
  </body>
</html>

＆＃13;

Answer 3

您可以根据所选的选项值隐藏和显示元素。见下面的例子

window.onload = function() {

  var val = $('#slider').val();
  output = $('#output');
  output.html(val);

  $('#slider').on('change', function() {
    output.html(this.value);
  });

  $('#Main').change(function() {
  console.log(this.value);
    if (this.value == "a") {
      $('#slider').show();
      $("#amntxt").hide();
      $('#slider').prop({
        'min': 0,
        'max': 1
      });
    }
    if (this.value == "b") {
      $('#slider').show();
      $("#amntxt").hide();
      $('#slider').prop({
        'min': 0,
        'max': 20
      });
    }
    if (this.value == "c") {
      $("#amntxt").show();
      $('#slider').hide();
    }
    $('#slider').val(0);
    output.html('0');
  });
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>Title</legend>
    <p>
      <label>
                Select modifier:
              </label>
      <select id="Main">
              	<option value="default">select an option</option>
                <option value="a">Option A</option>
                <option value="b">Option B</option>            
                <option value="c">Option C</option>                               
              </select>
    </p>
    <p>
      <label for="range">Select amount:</label>
      <input type="range" min="0" max="9000" id="slider" value="0" name="range"> 
      <textarea id="amntxt" style="display:none;"></textarea>
      <span id="output"></span>
    </p>
  </fieldset>
</form>

如何仅在特定选项上运行jQuery

3 个答案: