I have this small piece of code
HTML
<div class="select">
<p></p>
</div>
<div class="option">
<p class="active">text</p>
</div>
JS
$('.option p').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
if ($('.option p.active').length == 0) {
$('.select p').text('some text');
}
}
})
If I run this code in the chrome console, it works perfectly. But if I run it in my programme, it doesn't work (the .select p text is not changed). I tried putting an alert() after text() to see if it would execute, and apparently alert() is executed, so text() should also be executed. I don't understand why it is not being executed in my programme (it was working perfectly a few weeks ago)
You need to put the code inside a click handler. When you click on an element, do different things depending on whether you clicked on the active or inactive element.
If it's active, remove the class and put the default text in the select paragraph.
If it's not active, remove the class from all the other elements and add the class to this element, and display its text in the select paragraph.
$(".option p").click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(".select p").text("No option selected");
} else {
$(".option p").removeClass("active");
$(this).addClass("active");
$(".select p").text($(this).text());
}
});
.option p.active {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select">
<p>text 1</p>
</div>
<div class="option">
<p class="active">text 1</p>
</div>
<div class="option">
<p>text 2</p>
</div>
<div class="option">
<p>text 3</p>
</div>
Related
I have a div with the following structure. When I click on "btn-edit", I want to remove the "show" class from "contentNote" and add it to "txtAreaNote"; and to add "hide" to "contentNote" and remove it from "txtAreaNote". My jQuery code does not work correctly; how to fix this?
$('.btn-edit').click(function() {
var btn = $(this);
btn.each(function() {
$(this).find(".contentNote").removeClass('show').addClass("hide");
$(this).find(".txtAreaNote").removeClass('hide').addClass("show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cm-1">
edit
delete
<div class="contentNote show">
<p>some text</p>
</div>
<div class="txtAreaNote hide">
<textarea rows="5"></textarea>
</div>
</div>
find() searches children of the element you're calling it on. Use nextAll() or siblings() to find following matches (or any matches, before or after, in the case of siblings()).
$('.btn-edit').click(function(e) {
e.stopPropagation();
e.preventDefault();
var btn = $(this);
btn.nextAll(".contentNote").removeClass('show').addClass("hide");
btn.nextAll(".txtAreaNote").removeClass('hide').addClass("show");
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cm-1">
edit
delete
<div class="contentNote show">
<p>some text</p>
</div>
<div class="txtAreaNote hide">
<textarea rows="5"></textarea>
</div>
</div>
I dont know your full html structure, but it will be something like :
$('.btn-edit').click(function () {
$(this).closest(".cm-1").find(".contentNote").removeClass('show').addClass("hide");
$(this).closest(".cm-1").find(".txtAreaNote").removeClass('hide').addClass("show");
});
Go to parent class and then search in between two classes.
How can I replace a text (in a div tag, for example) with a select tag (dropdown) when hovering or onmouseover the text?
The way I tried with using innerHTML creates a select element, but it does not expand when clicked:
<div id="status" onmouseover="document.getElementById('status')
.innerHTML='<select><option>1</option><option>1</option></select>';">
This is a test
</div>
Try jQuery .hover and toggleClass to hide/show
$(".name, .name_choice").hover(function(){
$(".name, .name_choice").toggleClass("hide");
});
$(".name_choice").change(function(){
$(".name").html($(this).val());
});
.hide{
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="name">Select Name</div>
<div>
<select class="name_choice hide">
<option>Niklesh</option>
<option>Atul</option>
<option>Sachin</option>
</select>
</div>
</div>
I need to add a class(.highlight) to an element when its clicked upon, and it should be removed when clicked either on the element or anywhere else in the document.
I have managed to add and remove the class when the element is clicked using the classList.toggle() method but have no idea how to remove the class when a click happens in the document.
Here's my HTML, CSS and JS.
<p class="normal" onclick="detectClick(this)">This is paragraph 1</p>
<p class="normal" onclick="detectClick(this)">This is paragraph 2</p>
<p class="normal" onclick="detectClick(this)">This is paragraph 3</p>
.highlight {
background-color: yellow;
}
function detectClick(element) {
element.classList.toggle("highlight");
}
And here's where you can see the code in action, http://codepen.io/vbcda/pen/GodZmr
It can happen if you first remove exiting class 'highlight' from the element by using mousedown event by clicking anywhere in the body.
<body onmousedown="outerClick(this)"> // Add this in your html file
function detectClick(element) {
element.classList.toggle("highlight");
}
function outerClick(el){
var elements = document.querySelectorAll(".highlight");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('highlight');
}
}
I'd do something like this.
function detectClick(element) {
var elements = document.getElementsByClassName("normal");
Array.from(elements).forEach(function(element) {
element.setAttribute("class", "normal");
});
element.setAttribute("class", "normal highlight");
}
You could be explicit and use document.getElementsByClassName("normal highlight") too.
A simple lightweight solution
This can be done with just a couple of lines of CSS. The trick in this case is that you must add the tabindex attribute to each P so that it can receive focus.
Run the snippet below and click on the text to try.
p:not(:focus) { background-color: lightgray;}
p:focus { background-color: yellow;}
<p tabindex=1>This is paragraph 1</p>
<p tabindex=2>This is paragraph 2</p>
<p tabindex=3>This is paragraph 3</p>
if you want to use jquery:
$('.normal').click(function(e){
e.stopPropagation();
$(this).toggleClass('highlight');
});
$(document).click(function(){
$('.normal').removeClass('highlight');
});
When the the div with .redactor class is clicked, check if it is already as the selected element.
If it is already selected then do nothing.
If it is newly selected then
Execute the initialize_redactor() for that current selected div,
And execute the destroy_redactor() if there was any div which was previously selected.
And while any of the .redactor div is selected, if clicked other than the .redactor div, then execute destroy_redactor() for the currently selected .redactor div.
Sample in codepen.io
html:
<div id="toolbar_wrapper">
<div id="toolbar">
</div>
</div>
<div id="content">
<div class="redactor">
<h1>Header</h1>
<p>Paragraph</p>
</div>
<div class="redactor">
<h1>Another Header</h1>
<p>Another Paragraph</p>
</div>
</div>
You should loop through every ".redactor" element and run destroy_redactor on the selected element:
$('.redactor').on("click", function() {
$(".redactor").each(function () {
if($(this).hasClass("selected"))
{
destroy_redactor(current_edit);
$(this).removeClass("selected");
}
});
$(this).addClass("selected");
current_edit = $(this);
initialize_redactor(current_edit);
});
I think you just need to add two more lines to your js
You will destroy ALL .selected AFTER you check if the redactor has a class of selected:
if (!$(this).hasClass("selected")) {
destroy_redactor($('.selected'));
Then, if it already has the class selected, remove that class
} else {
$('.selected').removeClass('selected');
Here's the codepen to try it out:
http://codepen.io/anon/pen/vNEBNv
I have more than one element with the same class name, ideally they will be seven, so, on pageload they will be hidden and then I want to show the extra text when clicking on the anchor, but only for that very instance of the div, my jQuery code is currently removing hidden in all instances of the div, I am guessing the solution would be to add this somewhere. Thanks!
$(".show-more").click(function() {
return $(".extra-text").toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>
You need to traverse the DOM to find the .extra-text element related to the one which raised the event.
To do this you can use the this keyword which will refer to the element that raised the click event. Try this:
$(".show-more").click(function() {
$(this).closest('div').find(".extra-text").toggleClass("hidden");
});
Use .prev() in this context.
$(".show-more").click(function(e) {
e.preventDefault();
$(this).prev().toggleClass("hidden");
});
Fiddle
.extra-text is sibling to .show-more, so u can use siblings() method to get adjacent sibling element
$(".show-more").click(function() {
$(this).siblings(".extra-text").toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>