如何影响所选卡的部分

Question

我有很多卡片，我想在输入值偶然出现时显示卡片的某些部分。 这是可行的，但问题是当输入值发生变化时，所有卡片的一部分都会显示出来。我只想显示所选卡片的部分。

$(".card input").focus(function() {
  $(".save-or-esc").css("display", "flex")
})

.content-body.row {
  justify-content: center;
}

.content-body .card input,
.content-body .card textarea {
  text-align: center;
  border: 1px solid white;
  border-radius: 5px;
  transition: all 0.15s;
  width: 100%;
}

.content-body .card input:hover,
.content-body .card textarea:hover {
  border: 1px solid #e9e8ff;
}

.content-body .card input:focus,
.content-body .card textarea:focus {
  outline: none;
  border: 1px solid #746AFB;
}

.content-body .card-cover {
  width: 25%;
  padding: 0px 14px;
  margin-bottom: 50px;
}

@media (max-width: 1920px) {
  .content-body .card-cover {
    width: 33%;
  }
}

@media (max-width: 768px) {
  .content-body .card-cover {
    width: 50%;
  }
}

@media (max-width: 500px) {
  .content-body .card-cover {
    width: 100%;
  }
}

.card {
  margin-bottom: 0px;
  text-align: center;
}

.card .card-text {
  width: 100%;
  height: 145px;
  overflow: hidden;
}

.card .save-or-esc {
  width: 100%;
  justify-content: space-between;
  display: none;
}

.card .save-or-esc .btn {
  display: inline-block;
}

.card .save-or-esc .btn .feather {
  font-size: 20px;
}

.esc-button:hover {
  color: #f20000;
}

.save-button:hover {
  color: #005CC8;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-body row">

  <div class="card-cover">
    <div class="card">
      <div class="card-body">
        <input class="card-title" type="text" name="content-title" value="About">
        <div class="save-or-esc">
          <button class="esc-button btn" type="button">esc</button>
          <button class="save-button btn" type="button">save</button>
        </div>
      </div>
    </div>
  </div>

  <div class="card-cover">
    <div class="card">
      <div class="card-body">
        <input class="card-title" type="text" name="content-title" value="About">
        <div class="save-or-esc">
          <button class="esc-button btn" type="button">esc</button>
          <button class="save-button btn" type="button">save</button>
        </div>
      </div>
    </div>
  </div>

</div>

大家好，我已将我的项目添加到 sn-p。我希望你能帮助我。 问题是我单击输入时显示的所有“.save-or-esc”部分。但我只想显示点击卡的部分。谢谢。

Answer 1

如果我正确理解了您的问题，则只需稍作改动即可。 而不是

$(".card input").focus(function() {
  $(".save-or-esc").css("display", "flex")
})

你应该写：

$(".card input").focus(function() {
  $(this).closest(".save-or-esc").css("display", "flex")
})

检查以下示例：

$(".card input").focus(function() {
  $(".save-or-esc").parents('.card-cover ').css("display", "none")
  $(this).parents(".card-cover").css("display", "block")
  $(this).closest(".save-or-esc").css("display", "flex")
}).blur(function() {
$(".save-or-esc").parents('.card-cover ').css("display", "block")
})

.content-body.row {
  justify-content: center;
}

.content-body .card input,
.content-body .card textarea {
  text-align: center;
  border: 1px solid white;
  border-radius: 5px;
  transition: all 0.15s;
  width: 100%;
}

.content-body .card input:hover,
.content-body .card textarea:hover {
  border: 1px solid #e9e8ff;
}

.content-body .card input:focus,
.content-body .card textarea:focus {
  outline: none;
  border: 1px solid #746AFB;
}

.content-body .card-cover {
  width: 25%;
  padding: 0px 14px;
  margin-bottom: 20px;
}

@media (max-width: 1920px) {
  .content-body .card-cover {
    width: 33%;
  }
}

@media (max-width: 768px) {
  .content-body .card-cover {
    width: 50%;
  }
}

@media (max-width: 500px) {
  .content-body .card-cover {
    width: 100%;
  }
}

.card {
  margin-bottom: 0px;
  text-align: center;
}

.card .card-text {
  width: 100%;
  height: 145px;
  overflow: hidden;
}

.card .save-or-esc {
  width: 100%;
  justify-content: space-between;
  display: none;
}

.card .save-or-esc .btn {
  display: inline-block;
}

.card .save-or-esc .btn .feather {
  font-size: 20px;
}

.esc-button:hover {
  color: #f20000;
}

.save-button:hover {
  color: #005CC8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content-body row">

  <div class="card-cover">
    <div class="card">
      <div class="card-body">
        <input class="card-title" type="text" name="content-title" value="test1">
        <div class="save-or-esc">
          <button class="esc-button btn" type="button">esc</button>
          <button class="save-button btn" type="button">save</button>
        </div>
      </div>
    </div>
  </div>

  <div class="card-cover">
    <div class="card">
      <div class="card-body">
        <input class="card-title" type="text" name="content-title" value="test2">
        <div class="save-or-esc">
          <button class="esc-button btn" type="button">esc</button>
          <button class="save-button btn" type="button">save</button>
        </div>
      </div>
    </div>
  </div>

</div>

Answer 2

使用此代码检测输入是否有焦点

  $('input').blur(function() { 
    //add code when input is not focused
    alert('blurred');
  })
  .focus(function() {
    //add code when input is focused
    alert('focused');
  });

使用此代码检测输入值何时更改。

$('input').on('change', function(){
    alert('changed');
});

Answer 3

我做到了。感谢content

我的 jQuery 代码：

$(".card input").on("input", function() {   
  $(this).closest(".card").find(".save-or-esc").slideDown(500)
});