Javascript 单击禁用的输入时显示JS div

仅当禁用时，我试图在单击

submit

时显示

.hideme

消息

并且

.hideme

对于每个

submit

都应该是唯一的。我不确定是否应该使用数据属性来关联它们。

$（文档）.ready（函数（）{
$（“#post-1”）.hide（）；
$（“#post-1”）。单击（postNotification）；
});
函数postNotification（）{
$（“1号岗位”）
.show（）
.制作动画({
高度：“30px”，
不透明度：1
}, 250)
.延迟（2000年）
.制作动画({
高度：“0px”，
不透明度：0
}, 250);
}

.hideme{
背景：蓝色；
高度：0px；
不透明度：0；
}

信息1
信息2

您可以使用css使元素看起来被禁用，而不是使用（禁用）

.disabled
{
color:#C0C0C0;
}

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

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

---

不能单击已禁用的标记。 您可以使用“禁用”类：

希德姆先生{
背景：蓝色；
高度：0px；
不透明度：0；
颜色：#fff；
}
.残疾人{
颜色：#000；
不透明度：.65；
}

使用同一类显示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>

信息1
信息2

使用同级获得类“.hideme”。现在，每个禁用的按钮将显示以下消息：

<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>

$（文档）.ready（函数（）{
$（“.msg”）.hide（）；
$（“.disabled”）。单击（函数（）{
var id=“#”+this.id；
$（id）.兄弟姐妹（“.hideme”）
.show（）
.制作动画({
高度：“30px”，
不透明度：1
}, 250)
.延迟（2000年）
.制作动画({
高度：“0px”，
不透明度：0
}, 250);
});
});

重复的id。。在html上使用的是

post1

，在js上使用的是

post-1

禁用元素不会触发鼠标事件。你必须尝试不同的解决方案。可能创建“看起来”像按钮的

div

，并更改

指针：游标的类等可能重复的
    <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>

<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>