从根本上做功能调用有问题。功能在控制台中起作用 [英] Fundamentally doing something wrong with function calls. Functions do work in the console
问题描述
这是一个可靠的，适当的函数语法集合，对于我来说，我无法弄清楚为什么，但函数ServiceHover（）不会运行，除非我在控制台中手动触发它，而它几乎是精确的等于CategoryHover（）每次都完美运行。它必须是我调用函数的方式，显然有一些关于我从根本上错过了javascript的函数，因为这经常发生在我身上，我不确定为什么我的函数没有执行。
我保留我的代码都非常好的评论，所以我不应该解释函数的用途，而且这更多的是根本问题执行功能而不是其内部功能。如果在控制台中手动调用，每个函数都可以工作。
//此函数生成基于页面的内容在用户选择的类别上，
//为用户选择的服务，并且帮助操纵特征选择
//的每个阶段，以便QuoteEngine功能可以显示用户选择的小时数，价格小时
//和所需服务的总成本，以便用户可以非常清楚地看到什么服务
//他正在获取以及他的总成本中的每一美元来自哪里，以便用户可以
//做出明智的购买决定，并且能够清楚地了解提供
//的服务和相关定价。
$（document）.ready（function（）{
function BasicDropdown（）{
//隐藏下拉菜单以
开头//隐藏元素（class）下拉类别
$（。dropdown-category）。hide（）;
//使用class dropdown-service
$（。dropdown-service）隐藏元素。 hide（）;
//当类别列表标题悬停时，显示类别下拉列表
//当具有类别类别的元素悬停时，请执行以下操作：
$（。category）。hover（function（）{
//显示列表
$（。dropdown-category）。show（）;
// when element （）。
}，//（隐藏列表
$（。dropdown-category）。hide（）;
$ b））;
//当服务列表标题悬停时，显示服务下拉列表
//当具有类服务的元素被占用时，执行这个：
$（。service）。hover（function（）{
//显示列表
$（。dropdown-service）。show（）;
//当类服务的元素不再徘徊时，执行以下操作：
}，function（）{
//隐藏列表
$（。dropdown-service ）。隐藏（）;
}）;
}
//根据id输入更改所选服务
//创建一个函数来更改所选服务
函数ChangeService（id）{
//清除服务列表元素
$（。dropdown-service）。empty（）;
//在服务下拉式标题中显示名称显示新标题
$（＃ServiceOutput）。text（ServiceArray [id] [0] [1]）;
//循环遍历服务数组的选定部分的次数与
//部分的长度为
（var i = 0; i< ServiceArray [id]）的次数一样多。 length; i ++）{
//每个循环，用一个等于当前
//循环计数的数据键追加一个段落元素，一个id等于基于循环计数的数组区域的id ，
//并且还根据该循环计数插入元素的文本。
$（。dropdown-service）。append（'< p data-key =''+ i +'id ='+ ServiceArray [id] [i] [0] +'> ;'+ ServiceArray [id] [i] [1] +< / p>）;
}
//将变量Category设置为等于所选的ID。
Category = id;
}
函数CategoryHover（）{
//打开类别下拉列表并显示其服务列表
//当用户悬停在（）。
$（。dropdown-category> p）。hover（function（）{
//隐藏欢迎包装
$（ .welcomeWrapper）。hide（）;
//根据附加的数据key的值设置变量thisKey
thisKey = $（this）.data（key） ;
//创建一个变量outputList，并从CategoryArray赋值给它
outputList = CategoryArray [thisKey];
//设置类别的标题下拉列表（$（this）.text（））;
//调用ChangeService函数并将变量thisKey传递给它
ChangeService（thisKey）;
//显示服务dr op-down list
$（。dropdown-service）。show（）;
//显示ListOutput元素（这显示了histed元素的简短描述）
$（.ListOutput）。show（）;
//追加变量outputList作为段元素的值
$（.ListOutput）。append（'< p> + outputList +'< / p>'） ;
}，function（）{
//隐藏服务下拉列表
$（。dropdown-service）。hide（）;
//清空ListOutput元素
$（.ListOutput）。empty（）;
//隐藏ListOutput元素
$（.ListOutput）。hide（）;
//再次显示欢迎包装
$（。welcomeWrapper）。show（）;
}）;
}
函数ServiceHover（）{
//打开服务下拉列表并显示类别
的服务列表//当用户悬停在服务下拉列表中的一个元素上，执行此操作：
$（。dropdown-service> p）。hover（function（）{
//隐藏欢迎包装
$（。welcomeWrapper）。hide（）;
//根据所附数据key的值设置变量thisKey
thisKey = $（this）.data（ key）;
//创建一个变量outputList，并从CategoryArray赋值给它
outputList = ServiceArray [Category] [thisKey] [2] [0];
//显示ListOutput元素（这显示了histed元素的简短描述）
$（.ListOutput）。show（）;
//将变量outputList追加为段元素
$（.ListOutput）。append（'< p class =blue>' + outputList +'< / p>'）;
}，function（）{
//清空ListOutput元素
$（.ListOutput）。empty（）;
//隐藏ListOutput元素
$（.ListOutput）。hide（）;
//再次显示欢迎包装
$（。welcomeWrapper）。show（）;
}）;
}
BasicDropdown（）;
CategoryHover（）;
ServiceHover（）;
//启动
ChangeService（0）;
}）;
这些电话会出现什么问题？
JS小提琴： http：// jsfiddle。 net / gbJcg / 4 /
注意： 我在我的问题中提到，但由于某种原因， t显示，所有的数组应该被假定为已定义。我现在将它们包括在内以消除混淆，但它会使脚本广泛地延长。 b
$ b
添加详细信息： ChangeCategory的作品。 ChangeService似乎没有。但是，如果我在控制台中复制并粘贴ChangeService，并在控制台中调用它，则该功能可以完美地工作。这有帮助吗？我不知道我在这里做错了什么......
您的 由于live在最新版本的jQuery中已被弃用，因此您需要使用 This is a solid, proper syntax set of functions, and for the life of me I can't figure out why, but the function ServiceHover() will not run unless I trigger it manually in the console, while it's almost exact equal CategoryHover() runs perfectly each time. It has to be something about the way that I'm calling the functions, and clearly there's something about functions that I fundamentally missed in javascript, because this happens to me often, where I'm unsure why my functions are not executing. I keep my code all very well commented, so I shouldn't have to explain the functions's purposes, and furthermore, this is more a question of the fundamental execution of the functions rather than their inner functionality. Each function does work if called manually in the console. What am I doing wrong with these calls? JS Fiddle: http://jsfiddle.net/gbJcg/4/ Note: I mentioned in my question but for some reason the update didn't show up, that all of the arrays should be assumed defined. I'll now include them to remove confusion, but it will make the scripts extensively long Added detail: ChangeCategory works. ChangeService doesn't appear to. If I copy and paste ChangeService, however, in the console, and call it, in the console, the functionality works perfectly. Does that help? I have no idea what I'm doing wrong here... Well what I know is, since your Since live is deprecated in latest version of jQuery you need to use 这篇关于从根本上做功能调用有问题。功能在控制台中起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ dropdown-service 是动态添加的，您需要将其委派给文档中最近的静态父
$（。dropdown-service）。 function（）{
..
}）;
$（。dropdown-service）。on（mouseleave，p，function（）{
...
}）;
on 委托事件，并将鼠标悬停在 mouseenter 和 mouseleave 函数中。
//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);
});
dropdown-service is added dynamically, you need to delegated it to closest static parent present in the document which is dropdown-service in your case. $(".dropdown-service").on("mouseenter" ,"p",function () {
..
});
$(".dropdown-service").on("mouseleave" ,"p",function () {
...
});
on delegated event and break the hover into mouseenter and mouseleave function.
