jquery open div with dynamic id - javascript

I want to use jQuery to open and close a div.
But because the code that I use is dynamic and will be repeated below each other, I need to use a dynamic id.
HTML:
<div class="categoryratings-review-<?php echo $this->htmlEscape($_review->getId())?>" style="display: none;">
<p>Text</p>
</div>
<span class="showcategoryratings" id="review-<?php echo $this->htmlEscape($_review->getId())?>">
<span class="showcategoryratings-text">Per category</span>
</span>
I try to use this jQuery, but I guess the php line is not working:
$(document).ready(function() {
$('#review-<?php echo $this->htmlEscape($_review->getId())?>').click(function() {
$('.categoryratings-review-<?php echo $this->htmlEscape($_review->getId())?>').slideToggle("fast");
$(this).toggleClass('active');
});
});
How do I need to edit this correctly?

You can do it without PHP in your Javascript.
$(document).ready(function() {
$('.showcategoryratings').click(function() {
var categoryId = $(this).attr('id').split('-')[1];
$('.categoryratings-review-'+categoryId).slideToggle("fast");
$(this).toggleClass('active');
});
});
I think it works.

It'd be easier if you'd grouped your elements like below. By doing so, you don't need IDs at all. Take a look.
$(document).ready(function() {
$('.showcategoryratings').on("click", function() {
$(this).closest(".group").find(".categoryratings-review").slideToggle("fast");
$(this).toggleClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
<div class="categoryratings-review" style="display: none;">
<p>Text1</p>
</div>
<span class="showcategoryratings">
<span class="showcategoryratings-text">Per category1</span>
</span>
</div>
<div class="group">
<div class="categoryratings-review" style="display: none;">
<p>Text2</p>
</div>
<span class="showcategoryratings">
<span class="showcategoryratings-text">Per category2</span>
</span>
</div>
<div class="group">
<div class="categoryratings-review" style="display: none;">
<p>Text3</p>
</div>
<span class="showcategoryratings">
<span class="showcategoryratings-text">Per category3</span>
</span>
</div>

you can hook up all id's that start with review- to respond
$('[id^="review-"]').click(function() {
$( '.categoryratings-' + $(this).attr('id') ).slideToggle('fast') ;
$( this ).toggleClass('active');
});

Related

Get all href values from a string which is filled with HTML code from a textarea

Solved :)
var test = $('textarea[name=extract]').val();
var hh = $.parseHTML(test) ;
$.each($(test).find('.tile__link'),function(i,b){
var reff = $(this).attr('href');
$('.links').append("link/" +reff + "<br><br>");
})
I have HTML code copied from an website. And I want all href values with the class .tile_link in a String.
I did not find an solution, how I can get the value of href with the class .tile_link without the divs and text just the link?
Here's an example:
var test = $('textarea[name=extract]').val();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="extract">
<span class="txt-raise">8min</span>
</div></div>
<div class="js-hunq-badge fit-tr pr-- pt--"></div>
<div class="tile__footprint">
</div>
</a>
</div><div class="tile grid-tile tile--bordered"> <a href="#/profile//grid" class="tile__link">
<div role="image" aria-label="HSHBerl" style="background-image:url()" class="tile__image"></div>
<div class="bg-raise tile__info">
<div class="info info--middle txt-raise">
<div class="txt-truncate layout-item--consume">
<div class="typo-small lh-heading txt-truncate">
8 km <span class="icon icon-small icon-gps-needle icon-badge"></span>
</div>
<div class="lh-heading txt-truncate">
<div class="info__main-data">
<div class="info__username">
</div>
<div class="js-romeo-badge"></div>
<div class="info__icon-set">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__onlinestate js-online-state"><div>
<span class="icon icon-online-status ui-status--online icon-raise" title="Online"></span>
</textarea>
But I don't know how to extract it to get only the values of href.
You can do someting like this:
$(".tile_link").attr('href');
If you have more than one element with that class, you can do forEach or map.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Example:
$('.tile_link').map(function (element) { return $(this).attr('href'); });

Javascript hide/show div

I have a javascript hide/show div with 4 different divs going. It is working partially but not performing the way I would like. When I click one of the divs it opens up the hidden div, which is perfect, but when I click the other link to open up the other div I want the other one I clicked first to close and then the new one to open. Here is my javascript.
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggle('hide');
});
<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1"><div class="witb">
<hr class="dark2">
<p></p>Whats in the Bag <i class="fa fa-angle-down" style="font-size:24px"></i></p>
</div>
</div></a>
<div id='content2' style="display:none">
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
</div>
// Hopefully you have some selector reference to target them all
var $all = $(".drops"); // Clearly I used .drops for example
$('[data-value]').on('click', function(event) {
var $target = $('#'+ this.dataset.value);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
Here's an improved example:
var $all = $(".togglable");
$('[data-toggle]').on('click', function(event) {
var $target = $(this.dataset.toggle);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
[data-toggle]{cursor:pointer; display:inline-block; color:#0bf; padding:0 8px;}
.hidden{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="#el1">TOGGLE1</a>
<a data-toggle="#el2">TOGGLE2</a>
<a data-toggle="#el3">TOGGLE3</a>
<div id="el1" class="togglable hidden">ELEMENT1</div>
<div id="el2" class="togglable hidden">ELEMENT2</div>
<div id="el3" class="togglable hidden">ELEMENT3</div>
Please try this
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggleClass('hide');
});
It will be better if you could give your divs a common class instead of ids so you could hide other divs using this common class like :
$('.common_class').addClass('hide');
If you cant you could loop through all the divs and hide them before showing the current clicked one :
$('[id^="hideshow"]').on('click', function(event) {
$('[id^="hideshow"]').each(function(){
$('#'+$(this).data('value')).addClass('hide');
});
dataValue_id = $('#'+$(this).data('value'));
$(dataValue_id).toggleClass('hide');
});
Hope this helps.
Snippet using common classes :
$('.common_class').on('click', function(event) {
$('.common_class_2').not($('.common_class_2', this)).addClass('hide');
$('.common_class_2', this).toggleClass('hide');
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='common_class'>DIV 1
<p class='common_class_2'>Content 1</p>
</div>
<div class='common_class'>DIV 2
<p class='common_class_2 hide'>Content 2</p>
</div>
<div class='common_class'>DIV 3
<p class='common_class_2 hide'>Content 3</p>
</div>
<div class='common_class'>DIV 4
<p class='common_class_2 hide'>Content 4</p>
</div>

JQuery: Get Text from another <div> only by class

I'm trying to access text from an other div only by classes and with JQuery. I'm always struggling with JQuery because I'm not that familiar with it but for the most times i can get it to work somehow.
I tried something like this:
$(function() {
$(".quote_button").click(
function () {
var text = $(this).parent('.openticket_footer').prev('.openticket_warper').find('.answer_message').text();
alert(text);
}
);});
And many other ways but i cant figure it out.
The easiest way to show you what i want to do is by this picture:
Quote function
I want to click on the class="quote_button"button to access the text in class="answer_message"
Here the html code:
<div class="openticket_warper">
<div class="openticket_sidebar float_left">';
if($result["uID"]==$result_answer["uID"]){
echo '<p style="font-size: 8pt">Ersteller</p>';
}
echo '<p><strong>'. $result_answer["uName"] .' '. $result_answer["Firstname"] .'</strong></p>
<p style="font-size: 10pt">'. $result_answer["pName"] .'</p>
<div class="openticket_sidebar_userpicture">
<img src="images/default-user-icon.png" alt="User Picture">
</div>
</div>
<div class="openticket_ticketmesssage">
<p class="answer_message">'. $result_answer["Message"] .'</p>
</div>
<div class="clear"></div>
</div>
<div class="openticket_footer">
<input class="answerbutton float_right quote_button" type="button" value="Zitieren">
<div class="clear"></div>
</div>
Thank You!
Try this : Get parent using parent method, move to previous div and then find answer_message to get the text
$(function() {
$(".quote_button").click(function () {
var $parent = $(this).parent('.openticket_footer').prev('.openticket_warper');
var text = $parent.find('.answer_message').text();
alert(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="openticket_warper">
<div class="openticket_sidebar float_left">';
<p style="font-size: 10pt">Name of the candidate</p>
<div class="openticket_sidebar_userpicture">
<img src="images/default-user-icon.png" alt="User Picture">
</div>
</div>
<div class="openticket_ticketmesssage">
<p class="answer_message">Text Message is here</p>
</div>
<div class="clear"></div>
</div>
<div class="openticket_footer">
<input class="answerbutton float_right quote_button" type="button" value="Zitieren">
<div class="clear"></div>
</div>
$(document).on('click', '.quote_button', function(){
alert($(this).parents('.openticket_warper').find('.answer_message').text());
});

Including a plus+/minus- sign into a simple toggle menu jquery

I have the following html code:
<div class="slide-button" data-content="panel1">
<p><span id="panel-icon">+</span>Test1</p>
</div>
<div id="panel1" style="display: none">
<p> Test jquery menu1 </p>
</div>
<div class="slide-button" data-content="panel2">
<p><span id="panel-icon">+</span>Test2</p>
</div>
<div id="panel2" style="display: none">
<p> Test jquery menu2 </p>
</div>
and the following jquery code:
$(".slide-button").on('click', function(){
var panelId = $(this).attr('data-content');
$('#'+panelId).toggle(500);
});
The toggle itself works perfectly.
However, I also want to include a plus and minus sign as you can see from my span-tag in the html code.
What do I have to add to my existing jquery code in order to change the + and - sign when the user clicks on the link?
Thank you for any help :-)
if you change it to a class
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span>Test1</p>
</div>
<div id="panel1" style="display: none">
<p> Test jquery menu1 </p>
</div>
you could do
$(".slide-button").on('click', function(){
var panelId = $(this).attr('data-content');
$('#'+panelId).toggle(500);
$(this).find('.panel-icon').text(function(_, txt) {
return txt === "+" ? "-" : "+";
});
});
FIDDLE

jquery countdown inside span tags instead of printed directly

I have a jQuery countdown script that goes like this:
<script type="text/javascript">
$(document).ready(function () {
$('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
var $this = $(this).html(event.strftime(''
+ '<span>%-d</span> day%!d '
+ '<span>%H</span> hours '
+ '<span>%M</span> minutes '
+ '<span>%S</span> seconds'));
});
});
</script>
And the HTML code like this:
<div class="timer">
<div class="days-wrapper">
<span class="days"></span> <br>days
</div>
<div class="hours-wrapper">
<span class="hours"></span> <br>hours
</div>
<div class="minutes-wrapper">
<span class="minutes"></span> <br>minutes
</div>
<div class="seconds-wrapper">
<span class="seconds"></span> <br>seconds
</div>
</div>
What I'm trying to do is basically put the countdown inside the HTML code. I tried to do it like this:
+ '<div class="hours-wrapper"><span class="hours">%H</span> <br></div>'
But that didn't work. What am I doing wrong?
Here is my fiddle:
http://jsfiddle.net/nmmevtht/
Without knowing the script, based on what it is doing
$('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
$(".days").text(event.strftime("%-d"));
$(".hours").text(event.strftime("%H"));
$(".minutes").text(event.strftime("%M"));
$(".seconds").text(event.strftime("%S"));
});
And since you updated the question with your a fiddle, here it is running
$('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
$(".days").text(event.strftime("%-d"));
$(".hours").text(event.strftime("%H"));
$(".minutes").text(event.strftime("%M"));
$(".seconds").text(event.strftime("%S"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.0.4/dist/jquery.countdown.min.js"></script>
<div id="getting-started"></div>
<p></p>
<div class="timer">
<div class="days-wrapper">
<span class="days"></span> <br>days
</div>
<div class="hours-wrapper">
<span class="hours"></span> <br>hours
</div>
<div class="minutes-wrapper">
<span class="minutes"></span> <br>minutes
</div>
<div class="seconds-wrapper">
<span class="seconds"></span> <br>seconds
</div>
</div>
Just target the span with the class name you want to add it to and pass each increment to it
$('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
$(".days").html(event.strftime('%-d'));
$(".hours").html(event.strftime('%H'));
$(".minutes").html(event.strftime('%M'));
$(".seconds").html(event.strftime('%S'));
});
FIDDLE

Categories