Question

我只是在禁用时点击.hideme时才会显示submit消息。

每个.hideme submit应该是唯一的。我不确定是否应该使用数据属性来关联它们。

$(document).ready(function() {
  $("#post-1").hide();
  $("#post-1").click(postNotification);
});

function postNotification() {
  $("#post-1")
    .show()
    .animate({
      height: "30px",
      opacity: 1
    }, 250)
    .delay(2000)
    .animate({
      height: "0px",
      opacity: 0
    }, 250);
}

.hideme {
  background: blue;
  height: 0px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
  <div class="hideme" id="post1">Message 1</div>
  <input type="text" name="name" autocomplete="off" required/>
  <input type="submit" data-submit="1" id="post1" disabled></input>
</div>
<div class="second">
  <div class="hideme" id="post2">Message 2</div>
  <input type="text" name="name" autocomplete="off" required/>
  <input type="submit" data-submit="2" id="post2"></input>
</div>

Answer 1

而不是使用（禁用），您可以使用css使元素似乎被禁用

.disabled
{
color:#C0C0C0;
}

然后将此类添加到输入而不是禁用

<input type="submit" data-submit="1" class="btn disabled" id="post1" ></input>

并在jquery中检测到该元素已启用或禁用了类，并决定应该执行哪个操作

$(document).ready(function() {
$(".btn").click(
function(event){
if($(event.target).hasClass("disabled")){
event.target.parentElement.querySelector(".hideme").style.opacity="1";
event.target.parentElement.querySelector(".hideme").style.height="30";
}else{
alert("action");
}
});
});

Answer 2

您无法点击已停用的标签。您可以使用课程＆＃34;禁用＆＃34;：

<style>
    .hideme {
      background: blue;
      height: 0px;
      opacity: 0;
      color: #fff;
    }
    .disabled{
        color: #000;
        opacity: .65;
    }
</style>

使用同一个班级来显示onclick

    <div class="first">
      <div class="hideme ">Message 1</div>
      <input type="text" name="name" autocomplete="off" required/>
      <input type="submit" data-submit="1" id="post1" class="disabled" ></input>
    </div>
    <div class="second">
      <div class="hideme ">Message 2</div>
      <input type="text" name="name" autocomplete="off" required/>
      <input type="submit" data-submit="2" id="post2" class="disabled"></input>
    </div>

使用兄弟姐妹来上课＃34; .hideme＆＃34;。现在每个禁用按钮都会显示消息：

<script>
    $(document).ready(function() {
      $(".msg").hide();

        $(".disabled").click(function(){
            var id = "#"+ this.id;
            $(id).siblings(".hideme")
                .show()
                .animate({
                  height: "30px",
                  opacity: 1
                }, 250)
                .delay(2000)
                .animate({
                  height: "0px",
                  opacity: 0
                }, 250);

        });
    });
</script>

JS在点击禁用输入时显示div

2 个答案: