Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  ClosedNew TopicNew Poll

 onclick problem? custom bbcode [SOLVED]
hey there
I have a custom bbcode called 'test' which looks like
[test=1]hey there[/test]

it will output 1[hey there]
its purpose is when you click the number 1, the [hey there] will change color

the problem is when there are multiple of this custom bbcode in one post
[test=1]hey there[/test]

so if I click the number 1, the [hey there] changes color, but the [hello] at the number 2 changes color too!!
what should I do in order to prevent the 'not target' element from changing color?? I've read about e.preventDefault() thingy but I don't understand how to use it

here's my code
<div class="testnum" onclick="$('.testcont').css({'color':'#fff'});">(PARAM1)</div><div class="testcont">(PARAM2)</div>

thank you
That's a general selector. It'll match all elements on page that meet its criteria: that they have the class attribute, and one value of that attribute is 'testcont'. Since you've opted for an inline approach (for neatness' sake, I usually recommend scripts be taken out of BB code and other templates), you'll need to specify that you want just the element that follows the element with the onClick. For that, traverse the DOM using the keyword this, like so:

$(this).next().css('color', '#fff')

this is a keyword which has a variable value depending on how a function is called. In this case, $(this) represents a JavaScript object that references the specific element you clicked, and .next() constructs a new object by finding the next sibling of the element it's provided.

This post has been edited by Dusty: Jun 1 2018, 03:15 AM
ok, work!! thank you so much
This topic has been solved. If you need anymore help please post a new thread. Thanks for choosing Jcink services.

email: :: blog: John C.
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options ClosedNew TopicNew Poll