如何影响所选卡的部分

问题描述

我有很多卡片，当有输入值时，我想显示卡片的某些部分。 可以，但是问题是当输入值更改时，所有卡中的一部分就会显示出来。我只想显示所选卡的部分。

$(".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/[email protected]/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>

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

解决方法

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

  $('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');
});

,

如果我正确理解了您的问题，则只需稍作更改。 代替

$(".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/[email protected]/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>

,

我做到了。感谢这个content

我的jQuery代码：

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