从check / unchecked输入html中调用一些javascript [英] calling some javascript from check/unchecked input html
问题描述
以下是我的代码：
JAVASCRIPT：
$（function（）{
$（'＃world-map'）。vectorMap（{
map：'world_mill_en'，
normalizeFunction：'polynomial'，
hoverOpacity：0.9，
hoverColor：false，
markerStyle：{
initial：{
fill：'＃F8E23B'，
stroke：'＃383f47'
}
}，
backgroundColor：'＃000000'，
zoomMax：30，
<！ - 做这个检查加载） - >
/ *
系列：{
地区：[{
values：countriesvisited，
scale：['＃B1C9C0'，'＃41a62a ']，
normalizeFunction：'polynomial'
}]
}，
* /
<！--------------------------->
<！ - 请关注UNCHECKMARK - >
/ *
系列：{
地区：[{
values：countriesvisited，
scale：['＃B1C9C0']，
normalizeFunction：'polynomial '
}]
}，
* /
<！------------------------ --->
标记：[{
latLng：[49.1840，-123.0110]，
name：'Current City：Vancouver'
}]
}）;
}）;
$（document）.ready（function（）{
$（'＃myForm'）。fancyfields（）;
}）;
HTML
< div id =world-mapstyle =width：500px; height：400px>< / div>
< br />
< h2>复选框< / h2>
< div id =myForm>
< input id =Checkboxname =Checkboxchecked =checkedtype =checkboxstyle =display; none; />
< label>我去过的国家< / label>
< / div>
我有一个复选框对象。选中时，我希望执行
下的代码，并且在未选中的情况下执行
这两个代码下的代码对应于/ * * /区域中的代码。如果这是有道理的。
我想看一下代码，它会使我想要做的事情变得有意义。我试图尽可能简化它。
感谢！
这是一个可能的解决方案。请参阅jsFiddle： http://jsfiddle.net/YBGm4/9/
以下是我在jQuery ready事件中添加的一些注释代码：
//首先我们需要获取mapObject来操作地图
//这里显示：http://jvectormap.com/examples/usa-unemployment/
var mapObject = $（'＃world-map'）。 vectorMap（'get'，'mapObject'）;
//现在您需要在复选框中添加更改事件。为了简单起见，我只是
//复选框1
//现在您不能使用jQuery更改事件，因为您正在使用`fancyfields`
//请参阅文档：http：/ /www.jqfancyfields.com/examples-docs/
$（＃Checkbox1）。fancyfields（bind，onCheckboxChange，function（input，isChecked）{
if（isChecked）{
//如果复选框被选中，我们将setScale设置为原始值
mapObject.series.regions [0] .setScale（['＃B1C9C0'，'＃41a62a']）;
} else $ {
//如果复选框未被选中，我们将setScale设置为其他一些值
//我改变了它们，因为你使用的那些没有清楚地显示
mapObject .series.regions [0] .setScale（['＃00000'，'＃ff0000']）;
}
}）;
请注意，我只在这里使用 setScale 您的地图区域更改只处理比例参数。如果您需要更改区域值，可以这样做： mapObject.series.regions [0] .setValues（countriesvisited）或其他。
另请注意，我仅举了一个使用1复选框的示例。我假设您知道如何将逻辑添加到其他复选框。
这里试图解释发生了什么：
首先，您需要直接编辑地图对象，这意味着您需要从vectorMap类。无论出于何种原因，文档都没有解释这一点。但这就是美国就业的例子。
var mapObject = $（'＃world-map'）。 vectorMap（'get'，'mapObject'）;
现在我们是地图对象，我们可以更改您设置的系列和区域数据。再次参考 usa-employment 示例了解它如何工作。此外， console.log 可以帮助您查看对象上的方法和属性。
根据您的配置，你只有一个地区，所以我们可以像这样访问它：
var yourRegion = mapObject.series.regions [0] ;
现在region对象具有一些属性，您可以使用控制台进行检查：
console.log（yourRegion）;
如果仔细观察，您会发现它有两个方法可以帮助 setScale 和 setValue 。在这种情况下，您只能更改比例尺，所以我们可以执行以下操作：
mapObject.series.regions [0] .setScale （['＃00000'，'＃ff0000']）;
就你的例子而言，你只有数组中的颜色值，它似乎不是为我工作。也许你需要在数组中超过1个值？
现在另一个问题是使用复选框。您几乎可以复制 jqfancyfields 文档中给出的示例： http://www.jqfancyfields.com/examples-docs/ 。不幸的是，该插件使默认的jQuery变化事件复选框无法正常工作。
以下是语法：
（$ checkbox-element-id）。fancyfields ）{
//如果选中逻辑
} else {
//逻辑代码如果未选中
}
}）;
希望这可以使您的所有零件更清晰。询问不是。
here is my code thus far:
JAVASCRIPT:
$(function () {
$('#world-map').vectorMap({
map: 'world_mill_en',
normalizeFunction: 'polynomial',
hoverOpacity: 0.9,
hoverColor: false,
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#000000',
zoomMax: 30,
<!--DO THIS ON CHECKMARK (so on load)-->
/*
series: {
regions: [{
values: countriesvisited,
scale: ['#B1C9C0', '#41a62a'],
normalizeFunction: 'polynomial'
}]
},
*/
<!--------------------------->
<!--DO THIS ON UNCHECKMARK-->
/*
series: {
regions: [{
values: countriesvisited,
scale: ['#B1C9C0'],
normalizeFunction: 'polynomial'
}]
},
*/
<!--------------------------->
markers: [{
latLng: [49.1840, -123.0110],
name: 'Current City: Vancouver'
}]
});
});
$(document).ready(function () {
$('#myForm').fancyfields();
});
HTML
<div id="world-map" style="width: 500px; height: 400px"></div>
<br/>
<h2>Checkboxes</h2>
<div id="myForm">
<input id="Checkbox" name="Checkbox" checked="checked" type="checkbox" style="display; none;" />
<label>Countries I have Been To</label>
</div>
I have a checkbox object there. When checked I would like to to execute the code under
and when unchecked execute the code under
both codes correspond to the code in the /* */ area. if this makes sense.
I think taking a look at the code it will make sense what I am trying to do. I tried to strip it as much as possible for simplicity.
THANKS!
Here is a possible solution. See jsFiddle: http://jsfiddle.net/YBGm4/9/
Here is some annotated code that I added in your jQuery ready event:
// First we need to get mapObject to manipulate the map
// This was shown here: http://jvectormap.com/examples/usa-unemployment/
var mapObject = $('#world-map').vectorMap('get', 'mapObject');
// Now you need to add change event on your checkboxes. For simplicity, I just
// did checkbox 1
// Now you can't use jQuery change event, since you are using `fancyfields`
// See docs here: http://www.jqfancyfields.com/examples-docs/
$("#Checkbox1").fancyfields("bind", "onCheckboxChange", function (input, isChecked){
if (isChecked) {
// If the checkbox is checked, we setScale to the original values
mapObject.series.regions[0].setScale(['#B1C9C0', '#41a62a']);
} else {
// If the checkbox is not checked, we setScale to the some other values.
// I changed them, because the ones you used weren't showing up clearly.
mapObject.series.regions[0].setScale(['#00000', '#ff0000']);
}
});
Note that I only used setScale here since your map region changes only dealt with the scale parameters. If you need to change the region values, you can do this: mapObject.series.regions[0].setValues(countriesvisited) or whatever.
Also note that I only gave an example using 1 checkbox. I'm assuming you know how to add your logic to the rest of the checkboxes.
Edit 2
Here is an attempt to explain what is happening:
First you need to edit the map object directly, which means you need to get it from the vectorMap class. For whatever reason the documentation doesn't explain this. But this is what is done in the usa-employment example.
var mapObject = $('#world-map').vectorMap('get', 'mapObject');
Now that we the map object, we can change the series and regions data you set up. Once again refer to the usa-employment example on how this works. Additionally console.log can be helpful to see what methods and properties are on the object.
Based on your config, you only have one region, so we can access it like this:
var yourRegion = mapObject.series.regions[0];
Now the region object has some properties which you can inspect using your console:
console.log(yourRegion);
If you look carefully, you will see that it has two methods that can be helpful setScale and setValue. In this case you only change the scale, so we can do the following:
mapObject.series.regions[0].setScale(['#00000', '#ff0000']);
In terms of you example where you only have color value in the array, it did not seem to be working for me. Maybe you need more than 1 value in the array?
Now the other issue was working with the checkboxes. You can pretty much just copy the example given in the jqfancyfields documention: http://www.jqfancyfields.com/examples-docs/. Unfortunately the plugin makes the default jquery change events the checkboxes not work..
Here is what the syntax looks like:
$("#you-checkbox-element-id").fancyfields("bind", "onCheckboxChange", function (input, isChecked){
if (isChecked) {
// Logic for if checked
} else {
// Logic for if not checked
}
});
Hopefully that makes all the parts clearer for you. Ask if it is not.
这篇关于从check / unchecked输入html中调用一些javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
