I've got the following code that I am trying to condense to a for loop but am having no luck:
$("#motion1-sub1-1").hover( function () {
$("#motion1-sub1-1 div").show();
},
function () { $("#motion1-sub1-1 div").hide();
}
);
$("#motion1-sub1-2").hover( function () {
$("#motion1-sub1-2 div").show();
},
function () { $("#motion1-sub1-2 div").hide();
}
);
$("#motion1-sub1-3").hover( function () {
$("#motion1-sub1-3 div").show();
},
function () { $("#motion1-sub1-3 div").hide();
}
);
$("#motion1-sub1-4").hover( function () {
$("#motion1-sub1-4 div").show();
},
function () { $("#motion1-sub1-4 div").hide();
}
);
$("#motion1-sub1-5").hover( function () {
$("#motion1-sub1-5 div").show();
},
function () { $("#motion1-sub1-5 div").hide();
}
);
Here's the for loop code that have to condense the above code:
for (var i = 1; i <= 5; i++) {
$("motion1-sub1-" + i).hover( function () { $("motion1-sub1-" + i + "div").show();
},
function () { $("motion1-sub1-" + i + "div").hide();
}
);
}
No need for a for-loop, just bind to those elements that have a certain id pattern, and use this to reference them from within the hover functions:
$("[id^='motion1-sub1-']").hover(
function(){
$("div", this).show();
},
function(){
$("div", this).hide();
}
);
I don't know what type of element we're binding to, but you should provide that tag as part of the selector. For instance, if this is a div we're hovering, modify the selector to include that:
$("div[id^='motion1-sub1-']")
Or an even shorter, more DRY version:
$("[id^='motion1-sub1-']").on("mouseenter mouseleave", function(e){
$("div", this).toggle( e.type === "mouseenter" );
});
How about giving all your divs a class of motion-sub and then doing
$(".motion-sub").hover(function() {
$(this).show() }, function() { $(this).hide(); }
});
You're missing a space on motion1-sub1-x div selector right before the div
$("motion1-sub1-" + i + " div")
Related
Good Morning.
I want to combine my jQuery functions into one.
$('body').on('click', '.toggle2', function() {
console.log(123);
$('body').find('.dateshow').toggleClass('show');
});
$('body').on('click', '.toogle3', function() {
$('body').find('.autorshow').toggleClass('show');
});
$('body').on('click', '.toogle4', function() {
console.log(123);
$('body').find('.starshow').toggleClass('show');
});
Many thanks in advance
If you change all of your toggle links to have the following markup:
click
click
click
Then you can add a more generic handler such as:
$('.toggle').on('click', function() {
var targetSelector = $(this).attr('data-toggle');
$('.' + targetSelector).toggleClass('show');
});
Codepen: http://codepen.io/anon/pen/aBKJEb
When a callback is called jQuery will pass in an event object. You can check the target of the event and process as needed.
$('body').on('click', '.toggle2, .toogle3, .toogle4', function(e) {
var $target = jQuery(e.target),
$targetObject;
if($target.hasClass('toggle2')) {
$targetObject = jQuery('body').find('.dateshow');
}
if($target.hasClass('toogle3') {
$targetObject = jQuery('body').find('.autorshow');
}
if($target.hasClass('toogle4') {
$targetObject = jQuery('body').find('.starshow');
}
$targetObject.toggleClass('show');
});
$('body').on('click', '.toggle2,.toogle3,.toogle4', function() {
var mapper = {
'toggle2': { cls: '.dateshow', console:true },
'toggle3': { cls: '.autorshow', console:false },
'toggle4': { cls: '.starshow', console:true }
};
this.classList.forEach(function(cls) {
var obj = mapper[cls];
if(obj) {
obj.console && console.log(123);
$('body').find(obj.cls).toggleClass('show');
}
});
});
I am developing a jquery module for add delete edit view etc.
My problem is when page load complete, a list of items populate. After selecting an item this item's subitems loaded via jquery and html built, appended. But on this table event not fired up. Jquery Live is no longer available. Instead "On" is not working.
I tried :
$(document).on('click', selector , function () { foo(); });
But when a button is clicked it triggers other buttons as well.
My code is below.
I have a working code except links on table which loaded by jquery.
var myModule = {
el: {
listbutton: $('#list-button'),
listcontainer: $('#list'),
detailbutton: $(".item-detail"),
deletebutton: $(".item-delete"),
editbutton: $(".item-edit")
},
init: function() {
...
myModule.el.listbutton.on("click",myModule.getMainData);
},
getMainData: function() {
...
success: function(data) {
myModule.BuildTable(data.Value.DataList);
}
...
},
BuildTable: function (hws) {
var c = "";
c += "<table>";
$.each(hws, function() {
c +=
'<tr>' +
'<td>' + this.Title + '</td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<tr>';
});
c += "</table>";
myModule.el.listcontainer.empty().append(c);
myModule.TableLinks();
},
itemDetails: function () {
alert("Detail clicked");
},
itemDelete: function () {
alert("Delete clicked");
},
itemEdit: function () {
alert("Edit clicked");
},
TableLinks: function () {
$(document).on('click', myModule.el.detailbutton, function () { myModule.itemDetails(); });
$(document).on('click', myModule.el.deletebutton, function () { myModule.itemDelete(); });
$(document).on('click', myModule.el.editbutton, function () { myModule.itemEdit(); });
},
};
myModule.init();
Can you try following:
TableLinks: function () {
$(document).on('click',
".item-detail",
function (ev) {
myModule.itemDetails();
ev.stopPropagation();
}
);
$(document).on('click',
".item-delete",
function (ev) {
myModule.itemDelete();
ev.stopPropagation();
});
$(document).on('click',
".item-edit",
function (ev) {
myModule.itemEdit();
ev.stopPropagation();
});
},
you need the delegation
$("selector on which item is added").on("click", "new item selector", function(){
});
ON and Delegate
You have to do something like this to use the "on" method.
$("table").on("click", myModule.el.detailbutton, myModule.itemDetails());
UPDATE: Just noticed, you have to used a selector not a jQuery object in the second parameter.
So $("table").on("click", ".item-detail", myModule.itemDetails());
your approach using on is exactly what you need, but should have been bit more careful on constructing the element object
el: {
listbutton: '#list-button',
listcontainer: '#list',
detailbutton: ".item-detail",
deletebutton: ".item-delete",
editbutton: ".item-edit"
},
and use it like this
init: function () {
$(myModule.el.listbutton).on("click", myModule.getMainData);
},
what you did is
TableLinks: function () {
$(document).on('click', myModule.el.detailbutton, function () { myModule.itemDetails(); });
...
},
which is similar to and which is wrong
TableLinks: function () {
$(document).on('click', $(".item-detail"), function () { myModule.itemDetails(); });
....
},
working fiddle
Fiddle
i have a jquery which is for that, if the selected value is "<>"(Between) i want to change the style to display:block to an input box .. but here all the selected items css is changed
$(document).ready(function () {
$('.condition-change').change(function () {
if ($('select[name="SearchCondition"]').find('option[value="<>"]').attr("selected", true)) {
$('.second-value').css("display", "block");
}
});
});
Wrong condition
$(document).ready(function () {
$('.condition-change').change(function () {
if($('select[name="SearchCondition"]').find('option[value="<>"]').prop("selected")==true)
{
$('.second-value').css("display", "block");
}
});
});
You simply need to access the selected option value which you can get using val(), so put condition on val(),
Live Demo
$(document).ready(function () {
$('.condition-change').change(function () {
if ($(this).val() == "<>") {
$('.second-value').css("display", "block");
}
});
});
Also using show and hide instead of setting css.
Live Demo
$(document).ready(function () {
$('.condition-change').change(function () {
if ($(this).val() == "<>")
$('.second-value').show();
else
$('.second-value').hide();
});
});
Try,
$('.condition-change').change(function () {
if($(this).val().trim() === '<>') {
$('.second-value').show();
}
});
DEMO
Or
$('.condition-change').change(function () {
$('.second-value').toggle($(this).val().trim() === '<>');
});
DEMO I
// add .is(":checked") function to check whether "<>" value option is selected
$(document).ready(function () {
$('.condition-change').change(function () {
if($('select[name="SearchCondition"]').find('option[value="<>"]').is(":checked"))
{
$('.second-value').css("display", "block");
}
else
{
$('.second-value').css("display", "none");
}
});
});
I need to generate this 4 JQuery calls inside a Javascript Function:
$(".dropdown-menu .1_147").hover(
function() { $("#1_147").show(); },
function() { $("#1_147").hide(); }
);
$(".dropdown-menu .2_147").hover(
function() { $("#2_147").show(); },
function() { $("#2_147").hide(); }
);
$(".dropdown-menu .3_147").hover(
function() { $("#3_147").show(); },
function() { $("#3_147").hide(); }
);
$(".dropdown-menu .4_147").hover(
function() { $("#4_147").show(); },
function() { $("#4_147").hide(); }
);
I've write a Javascript function, the FOR loop only generates the last interaction "4_147". How can I tell the Javascript to generate the 4 JQuery calls?
My current JavaScript:
var submenu_navigation = document.getElementsByClassName("dropdown-menu");
var submenu_navigation_list = submenu_navigation[0].getElementsByTagName('li');
/*console.log(submenu_navigation_list);*/
function generateDropdownMenuMoldura(lis_array) {
for (var item in lis_array) {
var item_class_attr_name = lis_array[item].getAttribute('class');
console.log(item_class_attr_name);
$(".dropdown-menu ." + item_class_attr_name).hover(
function() { $("#" + item_class_attr_name).show(); },
function() { $("#" + item_class_attr_name).hide(); }
);
}
}
generateDropdownMenuMoldura(submenu_navigation_list);
Any clues?
Best Regards,
Update:
I got the solution:
/* Define the Elements that I need to loop */
var submenu_navigation = document.getElementsByClassName("dropdown-menu");
var submenu_navigation_list = submenu_navigation[0].getElementsByTagName('li');
function generateDropdownMenuMoldura(lis_array) {
for (var item in lis_array) {
var item_class_attr_name = lis_array[item].getAttribute('class');
console.log(item_class_attr_name);
(function(item_class_attr_name) {
$(".dropdown-menu ." + item_class_attr_name).hover(
function() { $("#" + item_class_attr_name).show(); },
function() { $("#" + item_class_attr_name).hide(); }
);
})(item_class_attr_name);
}
}
generateDropdownMenuMoldura(submenu_navigation_list);
My question is: How this anonymous function call works? This is a recursion technique?
Best Regards,
How to fix your specific solution was already answered in an other question.
But why so complicated? Judging from the JavaScript you currently have, and assuming everything apart from the scope works fine, a simpler solution would be:
$(".dropdown-menu li").hover(function() {
$('#' + this.className).show();
}, function() {
$('#' + this.className).hide();
});
There is no need to bind a different handler to each of these elements, since they all do basically the same thing.
Take a look at jQuery.each('dropdown-menu') method . It is for loops.
HTML Sample
<ul>
<li>foo</li>
<li>bar</li>
</ul>
jQuery Sample
$( "li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
I've searched but can't find how to do this. I'm trying to make the elements with comment-modbox inside this hide and show:
$('.comment-wrapper').each(function (index) {
$(this, '.comment-modbox').mouseover(function () {
$('.comment-modbox').show();
});
$(this, '.comment-modbox').mouseout(function () {
$('.comment-modbox').hide();
});
});
This code just hides and shows all comment-modbox regardless as to if they are contained within this.
Thanks for any help!
Answer:
$('.comment-wrapper').each(function (index) {
$(this).mouseover(function () {
$('.comment-modbox', this).show();
});
$(this).mouseout(function () {
$('.comment-modbox', this).hide();
});
});
try this (jQuery("selector", context)...)
$('.comment-wrapper').each(function (index) {
$('.comment-modbox', this).mouseover(function () {
$(this).show();
});
$('.comment-modbox', this).mouseout(function () {
$(this).hide();
});
});
Second choice:
$('.comment-wrapper').each(function (index) {
var wrapper = this;
$('.comment-modbox', wrapper)
.mouseover(function () {
$(this).show();
})
.mouseout(function () {
$(this).hide();
});
});