Question

现在点击带有蓝色边框的图片时，所有区域的边框都会被涂成红色。如何制作，以便在单击特定块时，笔划仅在此块中着色，文本将返回“未选择”？

<div class="container">
  <form name=formac onsubmit="return valid();" method="post" autocomplete="on">
    <fieldset><label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name.." autocomplete="off">
      <br>
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      <br>
      <label for="birthday">Birthday </label>
      <input type="text" id="birthdat" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" title="Day.Moth.Year" name="birthday" placeholder="Your date of birth.." style="margin-left: 17px;">
      <br>
      <label for="email">Email </label>
      <input type="email" id="email" name="emailadsdres" placeholder="Your email address..">
      <br>
      <label for="phone">Phone 
            <input type="tel" id="phone"  pattern="[0-9]{1}[0-9]{9}" name="phone" placeholder="Your phone number.." title="10 digit phone eg:1234569877" autocomplete="off" required >
        <br>
            <label for="city">City </label>
      <select id="city" name="city">
             <datalist> <option value="zurich">Zurich</option>
              <option value="geneva">Geneva</option>
              <option value="basel">Basel</option>
              <option value="bern">Bern</option>
              <option value="lugano">Lugano</option>
              <option value="vernier">Vernier</option>
              <option value="uster">Uster</option>   
              <option value="thun">Thun</option>   
              <option value="sior">Sior</option>   
        </datalist>
            </select>
      <br>
      <p> Are you a robot?

        <input type="checkbox" id="thebox" name="thebox"> I'm not a robot.<br>
      </p>
      <br>
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:70px"></textarea>
      <button type="button" id="btn1">Great</button>
      <button type="button" id="btn2">Good</button>
      <button type="button" id="btn3">Bad</button>

      <br>
      <input style="outline-style:inset; outline-offset: 10px;" type="submit" value="Submit" onsubmit="return valid();">

    </fieldset>
  </form>

$('.div').click(function() {

  if ( !($('.div').hasClass('selected')) ) {
      $('.div').addClass('selected');
      $('.p').text('selected text');
  } else {
    $('.div').removeClass('selected');
  }
});

.div {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  cursor: pointer;
}

.selected {
  border-color: red;
}

Answer 1

您的click代码引用：$(".div")，它获取与该选择器匹配的所有元素。您只需要点击一个，您可以通过$(this)获得。

您在更改文本时也做了同样的事情 - 您更改了与.p选择器匹配的所有元素的文本。您需要更改p元素的文本，该元素是被点击的div的下一个元素兄弟。

＆＃13;

$('.div').click(function() {

  if ( !($(this).hasClass('selected')) ) {
      $(this).addClass('selected');
      $(this.nextElementSibling).text('selected text');
  } else {
    $(this).removeClass('selected');
    $(this.nextElementSibling).text('not selected');    
    
  }
});

＆＃13;

.div {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  cursor: pointer;
}

.selected {
  border-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected</p>

＆＃13;

如何实现只有一个块的选择，而不是所有块？

1 个答案: