Change the text of anchor tag on clicking any div

Question

I have an list with each item having a different ID . So for single item i have written the HTML part.

The structure is something like

<div id='33496'>
    <div class='event_content'>.....
      <div>......
      </div>
      .....
    </div>

    <div class='event_content1'>
    ......
    </div>

    <div class='job_inn'>.....</div>

    <div><a id="show_more">text</a>
</div>

<div id='33495'>
    <div class='event_content'>.....
      <div>......
      </div>
      .....
    </div>

    <div class='event_content1'>
    ......
    </div>

    <div class='job_inn'>.....</div>

    <div><a id="show_more">text</a>
</div>

So i want here is if i will click any of the div either event_content1 or event_content or job_inn the text of show_more should change how can i do that ??

Here is the code i tried & got the solution....

$(".event_content1,.job_inn,.event_title").unbind('click').click(function(){
        var divid = $(this).attr('data-id');
        var show_more = "#show_more" + divid;   
        var show_less = "#show_less" + divid;

    if($(show_more).is( ':visible' )){
            $(this).parent().find('.show_more_link').text('show more');
            $(show_more).toggle('slow');
            $(show_less).toggle('slow');
          } else {
             $(this).parent().find('.show_more_link').text('show less');
             $(show_more).toggle('slow');
             $(show_less).toggle('slow');
          }
    });

do you have any parent element for `event_content event_content1 job_inn`? — Viscocent, Jun 02 '14 at 05:37
if you want to do it for DIVs only with some class pattern stars with same character/word. Use $("div[class^='common-start-words']").click(function(){ }); — Ankit Sharma, Jun 02 '14 at 05:43
You can't have non-unique id's. (can't have more than one show_more) switch it to a class instead. Add a generic class name to each parent and each clickable child. Move the show more class to the parent div of the anchor. — nhavar, Jun 02 '14 at 05:45
might be this link will helpful dor you. http://stackoverflow.com/questions/16955542/change-anchor-text-on-click-with-jquery-maybe — Kheema Pandey, Jun 02 '14 at 05:45
hmm no dude i want to change the particular id .....its not reaching there.... — UI Dev, Jun 02 '14 at 05:53

score 3 · Accepted Answer · answered Jun 02 '14 at 05:47

3

Please note that the id must be unique. But you are using same id for the a tag. So using class instead of id would be better like this:

$('.event_content, .event_content1, .job_inn').on('click',function (){
   $(this).parent().find('.show_more').text('change your text');
});

Be sure to change all:

<a id="show_more">text</a>

To

<a class="show_more">text</a>

answered Jun 02 '14 at 05:47

Bhojendra Rauniyar

83,432
35
168
231

if the list grows your selector will have to grow as well. It could get messy, suggest using an additional generic class as a selector. – nhavar Jun 02 '14 at 06:09

vlio20 · Answer 2 · 2014-06-02T05:55:05.480

2

change to this:

<div class='row' id='33496'>
    <div class='event_content'>.....
      <div>......
      </div>
      .....
    </div>

    <div class='event_content1'>
    ......
    </div>

    <div class='job_inn'>.....</div>

    <div><a class='text_here' id="show_more">text</a>
</div>

<div class='row' id='33495'>
    <div class='event_content'>.....
      <div>......
      </div>
      .....
    </div>

    <div class='event_content1'>
    ......
    </div>

    <div class='job_inn'>.....</div>

    <div><a class='text_here' id="show_more">text</a>
</div>

Use or between selectors:

$('.event_content, .event_content1, .job_inn').on('click', function()
{
    $('this').find('.text_here').text('put text here');
});

edited Jun 02 '14 at 05:55

answered Jun 02 '14 at 05:34

vlio20

8,955
18
95
180

Yes i know that, the problem is it is a list so if i i will do this then for all it will change. – UI Dev Jun 02 '14 at 05:35
No man i can do that..but its in a list & its having different id for each item – UI Dev Jun 02 '14 at 05:40
so add some class to it. then use `find` to get the closest element of the class you added and put the text in it. – vlio20 Jun 02 '14 at 05:42

shabeer · Answer 3 · 2014-06-02T06:22:16.223

giving same id is a wrong concept.

So the solution is change the id "show_more" to class="show_more"

Gave Html like this

<div id='33496'>
    <div class='event_content'>.....
      <div>......
      </div>
      .....
    </div>

    <div class='event_content1'>
    ......
    </div>

    <div class='job_inn'>.....</div>

    <div class="show_more"><a class="show_more">text</a>
</div>

Then the jQuery code will be like this

$('.event_content,.event_content1,.job_inn').click(function(){
   $(this).nextAll('div.show_more').find('a.show_more').html('your new text to change');
});

//.next() will find the next div with the class .show_more

No it will not work if .event_content is clicked then next will be .event_content1 — UI Dev, Jun 02 '14 at 06:03

Coderaemon · Answer 4 · 2014-06-02T06:07:12.907

1

Golden rule no elements with same ids. id = "show more" is repeated. So change html like <div class="show_more"><a>text</a></div>

Now you to find the nearest class="show_more" on clicking ".event_content, .event_content1, .job_inn"

You can do this by:

$(".event_content, .event_content1, .job_inn").on("click", function(){
    $(this).siblings(".show_more").find("a").text("text you want")}
);

edited Jun 02 '14 at 06:07

answered Jun 02 '14 at 05:53

Coderaemon

3,619
6
27
50

score 1 · Answer 5 · edited May 23 '17 at 10:32

1

You want to use JQuery with siblings:

$(".event_content, .event_content1, .job_inn").siblings('div').children('a[id="show_more"]').text("CHANGED");

So on click would look like this:

$(".event_content, .event_content1, .job_inn").click(function () {
    $(this).siblings('div').children('a[id="show_more"]').text("CHANGED");
});

Demo Here

Note: If you also want to support event_content1, event_content2,event_content3, etc. check this - you can do wildcard selection: https://stackoverflow.com/a/7814252/643761

edited May 23 '17 at 10:32

Community

1
1

answered Jun 02 '14 at 05:55

Simcha Khabinsky

1,970
2
19
34

Your html structure must be different?? I copy/pasted what you have in your question... Compare your questions' Html carefully. are you sure its `id="show_more"` - you sure its not `class="show_more"`? if it IS `class="show_more"`, then use `$(this).siblings('div').children('a[class="show_more"]').text("CHANGED");` – Simcha Khabinsky Jun 02 '14 at 06:10

score 1 · Answer 6 · answered Jun 02 '14 at 05:56

In HTML + CSS you could use tabindex the selector ~. Basic HTML:

<div tabindex="0" class="yourclass" > ....</div>

Basic CSS

div.yourclass:focus ~ div a {color:red;}

To be able to click inside div and any of its child in order to get .yourclass catching the click, , you could use : pointer-events:none;

div.yourclass * {
  pointer-events:none;
}

But , forms and links do need to be clicked:

   div.yourclass form *, 
   div.yourclass a {
     pointer-events:auto;
    }

DEMO

Pointer-events works only with latest browser, so you still do need some javascript :)

score 1 · Answer 7 · answered Jun 02 '14 at 06:07

There aren't any cross-browser ways to do this with CSS. A functional solution will require JavaScript. Below is a jQuery example and a modification of your HTML to suit.

I would suggest adding an additional class and/or parent wrapper in case the list grows.

<div id='33496' class="group">
    <div class='event_content item'>.....</div>
    <div class='event_content1 item'>......</div>
    <div class='job_inn item'>.....</div>

    <div class='show_more'><a href='#'>text</a>
</div>

<div id='33495' class="group">
    <div class='event_content item'>.....</div>
    <div class='event_content1 item'>......</div>
    <div class='job_inn item'>.....</div>

    <div class='show_more'><a href='#'>text</a>
</div>

Then:

  $(".group").on("click", ".item", function(){ 
      $(this).closest(".group")
             .children(".show_more")
             .children("a")
             .text("your_text_here");
  });

There's some additional logic you'll need if you want to pull some specific text out of the clicked element to place in your show more slot, but this should generally work.

Since several answers very similar to this have not been accepted, and if this fails to do what you need, we may need additional clarification as to how it is failing and more specifics as to the desired behavior or code requirements.

score 1 · Answer 8 · answered Jun 02 '14 at 06:53

1

Here a small demo

<code> 
   $(".event_content, .event_content1, .job_inn").click(function () {
      $(this).siblings('div').children('a[id="show_more"]').text("CHANGED");
     });
</code>

http://jsfiddle.net/anshukas/chVdF/ "DEMO"

answered Jun 02 '14 at 06:53

Anshu Kumar

633
7
12

Change the text of anchor tag on clicking any div

8 Answers8