Question

我有这两个脚本。一个是验证脚本，另一个是在悬停时放大一些图像。（我知道我可以用CSS来做，我正在试验）。我无法弄清楚为什么底部脚本不起作用。它可能显而易见，我没有看到。请帮忙。

// Wait for the DOM to be ready
$(function(){
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email:
       {
        required: true,
        email: true
      },

      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your first name",
      lastname: "Please enter your last name",
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }

document.getElementById("1").addEventListener("mouseover", imageEnlarge);
document.getElementById("1").addEventListener("mouseout", imageReset);  




 function imageEnlarge() {
 document.getElementById('1').style.height="100%";
 document.getElementById('1').style.width="100%";
 document.getElementById('1').style.position='absolute';
 }
 function imageReset() {

 document.getElementById('1').style.height="80%";
 document.getElementById('1').style.width="80%";
 document.getElementById('1').style.position='absolute';
 }


});
});

Answer 1

您需要将对imageEnlarge（）和imageReset（）函数的调用放在要影响的图像的mouseover和mouseout事件上。

使用您拥有的元素ID，它将是：

document.getElementById("1").addEventListener("mouseover", imageEnlarge);
document.getElementById("1").addEventListener("mouseout", imageReset);

您的代码中也有一些错误，因此我已相应地对其进行了更新。请参阅标有两个星号的注释**：

$(function () {
    // Initialize form validation on the registration form.
    // It has the name attribute "registration"
    $("form[name='registration']").validate({
        // Specify validation rules
        rules: {
            // The key name on the left side is the name attribute
            // of an input field. Validation rules are defined
            // on the right side
            firstname: "required",
            lastname: "required",
            email:
                {
                    required: true,
                    email: true
                },    
            // ** Removed closing brace **
        },
        // Specify validation error messages
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            email: "Please enter a valid email address"
        },
        // Make sure the form is submitted to the destination defined
        // in the "action" attribute of the form when valid
        submitHandler: function (form) {
            form.submit();
        }
    });

    // ** Moved this code out from the validate function - otherwise **
    // ** it will not be run until the validation function is called. **

    document.getElementById("1").addEventListener("mouseover", imageEnlarge);
    document.getElementById("1").addEventListener("mouseout", imageReset);

    function imageEnlarge() {
        document.getElementById('1').style.height = "100%";
        document.getElementById('1').style.width = "100%";
        document.getElementById('1').style.position = 'absolute';
    }

    function imageReset() {

        document.getElementById('1').style.height = "80%";
        document.getElementById('1').style.width = "80%";
        document.getElementById('1').style.position = 'absolute';
    }
});

多个脚本但底部脚本不起作用？

1 个答案: