Question

这是我有不同的跨度和每个跨度的一个输入和一个标签。我想要的是当我点击输入时它必须在标签上添加一个类。

.in {position: relative; background: none}
.lb {position: absolute; color: #000; z-index: 1}
.outer {display: block; width: 100%; margin: 60px}
.color {color: green}

<span class="outer">
  <label class="lb">hi there</label>
  <input class="in" type="text">
</span>

<span class="outer">
  <label class="lb">hi there</label>
  <input class="in" type="text">
</span>

<span class="outer">
  <label class="lb">hi there</label>
  <input class="in" type="text">
</span>

Answer 1

custom.js

$( "input" ).focus(function() {
  $( this ).parent().find( "label").addClass("focus");
  $( this ).parent().addClass(" focus-span");
});

$( "input" ).focusout(function() {
  $( this ).parent().find( "label").removeClass("focus");
  $( this ).parent().removeClass(" focus-span");
});

.in{position:relative; backgorund:none;  }
.lb{position:absolute; color:#000; z-index:1;}
.outer{display:block; width:100%; margin:60px;  }
 .color{color:green;}
 .focus{
   color:red;
 }
 .focus-span{
   border: 1px solid red;
 }

恢复代码添加焦点也可以添加一些css来查看更改希望你能找到解决方案

Answer 2

您可以这样做：

.in {background: none} /* removed the position, don't need it */
.lb {position: absolute; left: 0; top: 0; color: #000; z-index: 1}
.outer {position: relative; display: block; width: 100%; margin: 60px} /* added the position, need it to affect the label */
.color {color: green}

.in:focus + .lb {
  top: -20px;
}

<span class="outer">
  <input class="in" type="text" id="inp1">
  <label class="lb" for="inp1">hi there</label>
</span>

<span class="outer">
  <input class="in" type="text" id="inp2">
  <label class="lb" for="inp2">hi there</label>
</span>

<span class="outer">
  <input class="in" type="text" id="inp3">
  <label class="lb" for="inp3">hi there</label>
</span>

Answer 3

你可以这样做：

<script>
    jQuery(document).ready(function($)
    {
        $('span.outer').on('click', function()
        {
            $(this).addClass('foo')
        })
    })
</script>

这会将一个类（称为foo）添加到带有class outer的单击范围。

参考：https://api.jquery.com/addClass/

重新阅读问题后编辑

<script>
    jQuery(document).ready(function($)
    {
        $('span.outer').on('click', function()
        {
            $(this).closest('label').addClass('foo')
        })
    })
</script>

参考文献： https://api.jquery.com/closest/

单击输入时将类添加到标签

3 个答案: