Question

我正在尝试在它旁边创建一个按钮和一个复选标记（“同意”）。选中标记是隐藏的。该按钮可以有3种不同的状态（white.png，red.png，green.png），具体取决于表单中输入的实时验证。 UPD：这不是正常悬停点击的按钮。它是一个提交按钮，也指示表单是否为空或无法发送或可以发送。 仅当按钮的背景图片为“green.png”时，该复选标记才会在按钮悬停时显示。这是我的非工作代码：

  $(document).ready(function() {
        $("#checkmark").css("background-image", "url(checkmark.png)").hide();
        if ($("#button_send").css("background-image", "url(green.png)")){
        $("#button_send").hover(
            function() {
                $("#checkmark").show();
            },
            function() {
                $("#checkmark").hide();
            }
        );
        };

任何帮助将不胜感激！：）

Answer 1

您可以使用选择器

$("#button_send").hover(
        function() {
        if ($('#button_send[style^="background-image:"][style$="green.png)"]').length > 0) {
            $("#checkmark").show();
        }
        },
        function() {
            if ($('#button_send[style^="background-image:"][style$="green.png)"]').length > 0) {
                $("#checkmark").hide();
            }
        }
    );

Answer 2

您可以使用includes(string)方法验证if的值。

正如您在代码段中看到的那样。我将background声明为url（green.png），但值为url（＆＃34; https://stacksnippets.net/green.png＆＃34;）。 includes将帮助您在没有特定网址的情况下进行验证

＆＃13;

$(document).ready(function() {
      //$("#checkmark").css("background-image", "url(checkmark.png)").hide();
console.log($("#button_send").css("background-image"))

if ($("#button_send").css("background-image").includes('green.png')) {
      $("#button_send").hover(
        function() {
          console.log('hover Good')
          //$("#checkmark").show();
        },
        function() {
          //$("#checkmark").hide();
        }
      );
    };
})

＆＃13;

#button_send {
  background-image: url(green.png);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button_send">Send</button>

＆＃13;

只有当jQuery / CSS具有特定的背景图像时，它才会悬停在按钮上

2 个答案: