List Class Element(index).fadetoggle(some Speed) Not Working
I have 2 lists of class items
var listEditCommitLinks = document.getElementsByClassName('edit-comment-link');
var listEditCommitWrappers = document.getElementsByClassName('edit-commit-wrapper');
links and wrappers
<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" class="edit-commit-link">Edit</a>
<div class="edit-commit-wrapper">
..
</div>
style
.edit-commit-wrapper {
display: none;
}
On default each wrapper is hidden, and should fadetoggle on a link click (with the same list index nr)
But for some reason this isn't working out for me. The js for running through the list:
for (var i = 0; i < listEditCommitLinks.length; i++) {
listEditCommitLinks[i].onclick = function () {
listEditCommitWrappers[i].fadeToggle(200);
}
}
Error:
Uncaught TypeError: listEditCommitWrappers[i].fadeToggle is not a function
Added
Is there a way to fix this? A jQuery solution is also good (I tried this before js but wasn't working out either). Thanks
Answer
Problem is, fadeToggle
is a jQuery instance method and the items in listEditCommitWrappers
are not jQuery objects. How about...
jQuery(function($) {
$('.edit-commit-link').on('click', function(e) {
e.preventDefault();
$(this).next('.edit-commit-wrapper').fadeToggle(200);
});
});
See https://api.jquery.com/next/
Working jsFiddle ~ http://jsfiddle.net/t4nh85cm/
To make it work with your pastebin HTML, you could try something like this although I feel it's getting messy
$(this).closest('.row').next('.edit-commit-wrapper').fadeToggle(200);
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM