Question

我希望能够创建一个输入字段，您可以在其中输入CSS并具有该输入值，并且只将该输入值应用于该页面。

您可以向页面应用任意数量的输入值，并且每次重置前一个值。

这是我尝试过的，除了我试图重置css的那部分之外它还可以工作，所以我已经注释了那行（.remove）。

$('input').on('change', function(){

//$('style')[1].remove();
var input = $('input').val();

 var style = $('<style>span'+ input +'{background:yellow }</style>')
$('html > head').append(style);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value=":nth-child(3)">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>

Answer 1

尝试下面的代码段。我将示例片段中的跨度包装在DIV中，因为stackoverflow片段编辑器在其内容中有额外的跨度，这会在跨度1之前添加更多额外的空跨度元素。

您的示例的工作代码就是：

$(function(){

   $('input').on('keyup blur',function(){
      $('span').css('background','none');
      var input = $('input').val();
      var elm = $('span' + input);
      elm.css('background','yellow');

   });

})

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>

我需要做的就是重置css是在初始化时将背景设置为无。古德勒克

$(function(){
  
   $('input').on('keyup blur',function(){
      $('.contain span').css('background','none');
      var input = $('input').val();
      var elm = $('.contain span' + input);
      elm.css('background','yellow');

   });
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value=":nth-child(3)">
<div class="contain">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>  
</div>

如何使用jQuery重置CSS？

1 个答案: