这是一个坚实，正确的语法功能集，对于我的生活我无法弄清楚为什么，但函数ServiceHover（）将不会运行，除非我在控制台中手动触发它，而它几乎是准确的等于CategoryHover（）每次运行都很完美。它必须是我调用函数的方式，显然有一些我在javascript中从根本上遗漏的函数，因为这经常发生在我身上，我不知道为什么我的函数没有执行。
我保持对代码的评论非常好，所以我不必解释函数的用途，而且，这更多的是函数的基本执行而不是内部功能的问题。如果在控制台中手动调用，则每个功能都有效。
//this function generates the content of the page based on which category the user selects,
//which services the user selects, and help maneuver through each stage of the feature selection
//so that the QuoteEngine function can display the user's selected hour count, price per hour
// and total cost of the needed service so that the user can see very clearly what services
//he is getting and where every dollar of his total cost is coming from so that the user can
//make a well informed purchase decision, and be able to clearly understand the services offered
//and related pricing.
$(document).ready(function () {
function BasicDropdown() {
//hide the drop-downs to begin with
//hide element with class dropdown-category
$(".dropdown-category").hide();
//hide element with class dropdown-service
$(".dropdown-service").hide();
//when the category list title is hovered over, show the category drop-down list
//when element with class category is hovered, do this:
$(".category").hover(function () {
//show the list
$(".dropdown-category").show();
//when element with class category is no longer hovered, do this:
}, function () {
//hide the list
$(".dropdown-category").hide();
});
//when the service list title is hovered over, show the service drop-down list
//when element with class service is hovered, do this:
$(".service").hover(function () {
//show the list
$(".dropdown-service").show();
//when element with class service is no longer hovered, do this:
}, function () {
//hide the list
$(".dropdown-service").hide();
});
}
//change the selected service based on an id input
//create a function to change the selected service
function ChangeService(id) {
//clear the service list element
$(".dropdown-service").empty();
//make the name inside the service drop-down title show the new title
$("#ServiceOutput").text(ServiceArray[id][0][1]);
//loop through the chosen section of the service array for as many times as the
//section is in length
for (var i = 0; i < ServiceArray[id].length; i++) {
//each loop, append a paragraph element with a data key equal to the current
//loop count, an id equal to the id of the array area based on the loop count,
//and also insert the element's text according to that loop count also.
$(".dropdown-service").append('<p data-key="' + i + '" id="' + ServiceArray[id][i][0] + '">' + ServiceArray[id][i][1] + "</p>");
}
//set the variable "Category" to be equal to the chosen id.
Category = id;
}
function CategoryHover() {
//make the category drop-down list open and show its list of services
//when the user hovers over an element in the category drop-down, do this:
$(".dropdown-category > p").hover(function () {
//hide the welcome wrapper
$(".welcomeWrapper").hide();
//set the variable "thisKey" based on the value of the data "key" attached
thisKey = $(this).data("key");
//create a variable "outputList" and assign a value to it from "CategoryArray"
outputList = CategoryArray[thisKey];
//set the title of the category drop-down lists title to the currently hovered text
$("#CategoryOutput").text($(this).text());
//call the ChangeService function and pass the variable "thisKey" into it
ChangeService(thisKey);
//show the service drop-down list
$(".dropdown-service").show();
//show the ListOutput element (this shows a short description of the hovered element)
$(".ListOutput").show();
//append the variable "outputList" as the value of a paragraph element
$(".ListOutput").append('<p>' + outputList + '</p>');
}, function () {
//hide the service drop-down list
$(".dropdown-service").hide();
//empty the ListOutput element
$(".ListOutput").empty();
//hide the ListOutput element
$(".ListOutput").hide();
//show the welcome wrapper again
$(".welcomeWrapper").show();
});
}
function ServiceHover() {
//make the service drop-down list open and show the list of services for the category
//when the user hovers over an element in the service drop-down, do this:
$(".dropdown-service > p").hover(function () {
//hide the welcome wrapper
$(".welcomeWrapper").hide();
//set the variable "thisKey" based on the value of the data "key" attached
thisKey = $(this).data("key");
//create a variable "outputList" and assign a value to it from "CategoryArray"
outputList = ServiceArray[Category][thisKey][2][0];
//show the ListOutput element (this shows a short description of the hovered element)
$(".ListOutput").show();
//append the variable "outputList" as the value of a paragraph element
$(".ListOutput").append('<p class="blue">' + outputList + '</p>');
}, function () {
//empty the ListOutput element
$(".ListOutput").empty();
//hide the ListOutput element
$(".ListOutput").hide();
//show the welcome wrapper again
$(".welcomeWrapper").show();
});
}
BasicDropdown();
CategoryHover();
ServiceHover();
//initiate
ChangeService(0);
});
这些电话我做错了什么？
JS小提琴： http://jsfiddle.net/gbJcg/4/
注意： 我在我的问题中提到过但由于某种原因没有显示更新，所以应该假定所有数组都已定义。我现在将它们包括在内以消除混淆，但它会使脚本长得很长
添加了详细信息： ChangeCategory正常运行。 ChangeService似乎没有。但是，如果我在控制台中复制并粘贴ChangeService，并在控制台中调用它，则该功能可以完美地运行。这有帮助吗？我不知道我在这里做错了什么......
答案 0 :(得分：0)
检查您的控制台，您有Uncaught ReferenceError: ServiceArray is not defined
抛出此异常，并且程序的其余部分未运行
编辑：小提琴改变后丢失的数组初始化似乎代码有效。我在2个函数的开头添加了警报，以确保它们被调用（参见http://jsfiddle.net/gbJcg/3/）
编辑＃2 ：
当你没有任何响应$(".dropdown-service > p").hover(...)选择器的元素时，对".dropdown-service > p"的调用就完成了。它们可能稍后通过ajax或js执行的其他一些html操作添加
您应该使用等效的jquery live：
$(document).on("mouseenter",".dropdown-service > p",function() {
....
});
$(document).on("mouseleave",".dropdown-service > p",function() {
....
});
答案 1 :(得分：0)
我所知道的是，由于您的dropdown-service是动态添加的，因此您需要将其委托给文档中最接近的静态父级，在您的情况下为dropdown-service。
$(".dropdown-service").on("mouseenter" ,"p",function () {
..
});
$(".dropdown-service").on("mouseleave" ,"p",function () {
...
});
由于在最新版本的jQuery中不推荐使用live，因此您需要使用on委派事件并将鼠标悬停在mouseenter和mouseleave函数中。