How to differ changing text of child class based on parent class in javascript code?

I try to set value and text of my child classes after clicking on one of two buttons in my html code

$(".fce-pool-for > .fce-pool-bar").val($('.fce-pool-bar').val(Math.round(resultFor))); $(".fce-pool-for > .fce-pool-percentage").text($('.fce-pool-percentage').text((Math.round(resultFor).toString()) + "%")); $(".fce-pool-against > .fce-pool-bar").val($('.fce-pool-bar').val(Math.round(resultAgainst))); $(".fce-pool-against > .fce-pool-percentage").text($('.fce-pool-percentage').text((Math.round(resultAgainst).toString()) + "%"));

But do not know how to set values when parent class is different... please someone has an advice how to do that ???

Not really clear what you are asking. Please edit the question with more specifics
– charlietfl
Sep 2 at 12:39

as you can see, I use <progress class="fce-pool-bar" max="100" value="0"></progress> and <p class="fce-pool-percentage">0 %</p> on making pool statistics and would like to set value for bar and text for p element in similar way like this: $('.fce-pool-bar').val(Math.round(resultFor)); $('.fce-pool-percentage').text((Math.round(resultFor).toString()) + "%"); ... but I need to set different values for classes when they are under parent classs 'for' and parent class 'against'.... and i do not know how to catch content based on parent class
– Matus Vrsansky
Sep 2 at 12:44

@charlietfl Seems clear to me at this point in time.
– Mark Schultheiss
Sep 2 at 15:39

2 Answers
2

I don't know where you get the resultFor and resultAgainst value from so I put an example of that in there, using the commented out functions.

resultFor

resultAgainst

Note the key to your question is "what was clicked, from where". To do that, I attached an event handler to the pools '.fce-pool-against, .fce-pool-for', targeting the buttons within that> '.fce-pool-button' as in:

'.fce-pool-against, .fce-pool-for'

'.fce-pool-button'

$('.fce-pool-against, .fce-pool-for').on('click', '.fce-pool-button',

Then, inside the function I use the attached pool (the delegateTarget) and find stuff inside that during the click event handler function execution.

delegateTarget

let pool = $(event.delegateTarget);

Documentation: https://api.jquery.com/event.delegateTarget/

Perhaps a better solution is to use a data attribute in each pool, so I put an example of that in there, this makes the code much more generic, and we can attach a button click handler to each pool and then use that, finding the elements we need in each pool when clicked.

Separate thing snippet

let resultFor = 20; let resultAgainst = 13; $('.fce-pool-for').on('click', '.fce-pool-button', function(event) event.preventDefault(); let pool = $(event.delegateTarget); let resultValue = Math.round(resultFor); pool.find('.fce-pool-percentage').text( resultValue + " %"); pool.find('.fce-pool-bar').val(resultValue); ); $('.fce-pool-against').on('click', '.fce-pool-button', function(event) event.preventDefault(); let pool = $(event.delegateTarget); let resultValue = Math.round(resultAgainst); pool.find('.fce-pool-percentage').text( resultValue + " %"); pool.find('.fce-pool-bar').val(resultValue); );

Use the data property/attribute to do something more generic:

$('.fce-pool-against, .fce-pool-for').on('click', '.fce-pool-button', function(event) event.preventDefault(); // keep link from executing let pool = $(event.delegateTarget); // the pool let votes = pool.data('votes'); // data from the pool votes = votes + 1; // store new value pool.data('votes', votes); // update the percent and display $('.fce-pool-button').trigger('showvalues'); ); $('.fce-pool-against, .fce-pool-for') .on('showvalues', '.fce-pool-button', function(event) event.preventDefault(); // keep link from executing let pool = $(event.delegateTarget); // the pool let votes = pool.data('votes'); // data from the pool let totalVotes = 0; $('.fce-pool-button').each(function(e) totalVotes = totalVotes + $(this).closest('.fce-pool').data('votes'); ); let percent = (votes / totalVotes) * 100; //console.log(totalVotes, votes, percent); let resultValue = Math.round(percent); // find the elements in our pool, set them pool.find('.fce-pool-percentage').text(resultValue + " %"); pool.find('.fce-pool-bar').val(resultValue); pool.find('.votes-display').text(votes); ) .find('.fce-pool-button') .trigger('showvalues'); // trigger initial display

Note I removed the php replacing it with text since it had nothing to do with the question.
– Mark Schultheiss
Sep 2 at 15:25

learned something new...never even knew about delegateTarget...handy
– charlietfl
Sep 2 at 15:43

votesFor represents number of clicks on More button and votesAgainst represents number of clicks on Less button... you have great solution :) ofcourse. I need to influence both progress bars and set value after calculating and changing values of votesFor and votesAgainst :) hopefully it would not be big problem to solve.. but your solution will be great example for me :) definitely
– Matus Vrsansky
Sep 2 at 18:49

I added ability to increment based on clicks and display initial and on each update via a click
– Mark Schultheiss
Sep 27 at 16:37

I think what you want is to be able to isolate the parent class of whichever fce-pool-button is clicked.

fce-pool-button

Give the fce-pool-against and fce-pool-for parents a common class like fce-pool along with the classes they already have.

fce-pool-against

fce-pool-for

fce-pool

Then you can isolate the parent fce-pool class by traversing to closest('.fce-pool') and use find() within that parent to look for instance specific elements like the <progress>.

fce-pool

closest('.fce-pool')

find()

<progress>

You can also use is() to determine whether it is for or against pool so you know how to manage the data for that instance

is()

for

against

$('.fce-pool-button').click(function(event) // "this" is the button that was clicked var $pool = $(this).closest('.fce-pool'), // find the progess element in current instance $progress = $pool.find('progress.fce-pool-bar'), // set boolean to know which type it is isForPool = $pool.is('.fce-pool-for');// true/false // now use logic similar to $progress.val( isForPool ? resultFor : resultAgainst) )

This is one way to get the parent "pool" markup, nothing wrong with this up to that point.
– Mark Schultheiss
Sep 2 at 15:41

@MarkSchultheiss thank you for your advice, it looks really helpful, but I can`t use your solution, cause my event is in $(document).ready(function () .. how to implement your example in that? .on('click', '.fce-pool-button', function(event) is not working, unfortunatelly
– Matus Vrsansky
Sep 27 at 6:50

@MatusVrsansky Are you referencing this answer or the one I put forth? I only made a comment on this one.
– Mark Schultheiss
Sep 27 at 15:52

@MarkSchultheiss I apologize, I had to change parameter, but it is working already :) now I need to find solution how to draw result for both progress bars without clicking on button, in "window.onload" function. I do not know, how to separate it, when is forLoop . draw 20% and when is AgainstLoop, draw 40%. But that is my problem and your solution helped me so much , THANK YOU !!!
– Matus Vrsansky
Sep 28 at 9:06

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt