Question

文本字段的id为“colormeup”。但这似乎并没有起作用。事件没有受到文本域的束缚。

以下是clientlib中的js代码。

(function (document) {
        var $form = $(document).find("form.foundation-form");
        var $in = $form.find("#colormeup");
        $in.mouseenter(function(){
           $(this).css("border", "1px solid #861bc4");
        });
})(document);

<form action="/content/validator/_jcr_content/Body/colorcheck" method="post" class="coral-Form coral-Text cq-dialog foundation-form content foundation-layout-form cq-dialog-floating coral-Form--aligned coral--dark" data-cq-dialog-pageeditor="/editor.html/content/validator.html" data-foundation-form-ajax="true" style="top: 11.25px; left: 402.5px;">

<div class="cq-dialog-content coral-TabPanel coral-TabPanel--large" data-init="tabs">
<nav class="coral-TabPanel-navigation" role="tablist">
<a class="coral-TabPanel-tab is-active" href="#" data-toggle="tab" role="tab" tabindex="0" aria-selected="true" aria-controls="coral-84" aria-disabled="false">InfoValidator</a></nav>
	<div class="coral-TabPanel-content"><section class="coral-TabPanel-pane coral-FixedColumn foundation-layout-util-vmargin is-active" id="coral-84" role="tabpanel" aria-hidden="false">
<div class="coral-FixedColumn-column">
<div class="coral-Form-fieldwrapper">
<label class="coral-Form-fieldlabel">Email</label>
<input class="coral-Form-field coral-Textfield" id="colormeup" data-rootpath="/content/dam/barclays" type="text" name="./email" value="xxxxx@gmail.com" data-validation="">
<span class="coral-Form-fieldinfo coral-Icon coral-Icon--infoCircle coral-Icon--sizeS" data-init="quicktip" data-quicktip-type="info" data-quicktip-arrow="right" data-quicktip-content="Enter Email Id" aria-label="Enter Email Id" tabindex="0"></span></div></div>


</section>


</div></div>

</form>

Answer 1

尝试使用find代替closest。closest具有父元素的目标，document没有父元素。还有一件事可以定义边框的范围css或像border:1px solid color这样的js。没有提到范围border-color不可见

工作示例

＆＃13;

(function(document) {
  var $form = $(document).find("form.foundation-form");
  var $in = $form.find("#colormeup");
  $in.mouseenter(function() {
    $(this).css("border", "1px solid #861bc4");
  });
})(document);

＆＃13;

#colormeup {
  border: 1px solid #222;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/content/validator/_jcr_content/Body/colorcheck" method="post" class="coral-Form coral-Text cq-dialog foundation-form content foundation-layout-form cq-dialog-floating coral-Form--aligned coral--dark" data-cq-dialog-pageeditor="/editor.html/content/validator.html"
  data-foundation-form-ajax="true" style="top: 11.25px; left: 402.5px;">

  <div class="cq-dialog-content coral-TabPanel coral-TabPanel--large" data-init="tabs">
    <nav class="coral-TabPanel-navigation" role="tablist">
      <a class="coral-TabPanel-tab is-active" href="#" data-toggle="tab" role="tab" tabindex="0" aria-selected="true" aria-controls="coral-84" aria-disabled="false">InfoValidator</a></nav>
    <div class="coral-TabPanel-content">
      <section class="coral-TabPanel-pane coral-FixedColumn foundation-layout-util-vmargin is-active" id="coral-84" role="tabpanel" aria-hidden="false">
        <div class="coral-FixedColumn-column">
          <div class="coral-Form-fieldwrapper">
            <label class="coral-Form-fieldlabel">Email</label>
            <input class="coral-Form-field coral-Textfield" id="colormeup" data-rootpath="/content/dam/barclays" type="text" name="./email" value="xxxxx@gmail.com" data-validation="">
            <span class="coral-Form-fieldinfo coral-Icon coral-Icon--infoCircle coral-Icon--sizeS" data-init="quicktip" data-quicktip-type="info" data-quicktip-arrow="right" data-quicktip-content="Enter Email Id" aria-label="Enter Email Id" tabindex="0"></span></div>
        </div>


      </section>


    </div>
  </div>

</form>

＆＃13;

或者只是您可以使用css hover

＆＃13;

#colormeup{

}
#colormeup:hover{
border:1px solid red;
}

＆＃13;

<form action="/content/validator/_jcr_content/Body/colorcheck" method="post" class="coral-Form coral-Text cq-dialog foundation-form content foundation-layout-form cq-dialog-floating coral-Form--aligned coral--dark" data-cq-dialog-pageeditor="/editor.html/content/validator.html"
  data-foundation-form-ajax="true" style="top: 11.25px; left: 402.5px;">

  <div class="cq-dialog-content coral-TabPanel coral-TabPanel--large" data-init="tabs">
    <nav class="coral-TabPanel-navigation" role="tablist">
      <a class="coral-TabPanel-tab is-active" href="#" data-toggle="tab" role="tab" tabindex="0" aria-selected="true" aria-controls="coral-84" aria-disabled="false">InfoValidator</a></nav>
    <div class="coral-TabPanel-content">
      <section class="coral-TabPanel-pane coral-FixedColumn foundation-layout-util-vmargin is-active" id="coral-84" role="tabpanel" aria-hidden="false">
        <div class="coral-FixedColumn-column">
          <div class="coral-Form-fieldwrapper">
            <label class="coral-Form-fieldlabel">Email</label>
            <input class="coral-Form-field coral-Textfield" id="colormeup" data-rootpath="/content/dam/barclays" type="text" name="./email" value="xxxxx@gmail.com" data-validation="">
            <span class="coral-Form-fieldinfo coral-Icon coral-Icon--infoCircle coral-Icon--sizeS" data-init="quicktip" data-quicktip-type="info" data-quicktip-arrow="right" data-quicktip-content="Enter Email Id" aria-label="Enter Email Id" tabindex="0"></span></div>
        </div>


      </section>


    </div>
  </div>

</form>

＆＃13;

我正在尝试更改触摸UI对话框的文本字段的颜色

1 个答案: