How to add class depends on data-target (Bootstrap)

Question

Basically, i have a menu like this:

 <a class="tab-feed-filter-switch active bound" href="sample.com/ALL"  data-target="#filter-fb">FACEBOOK</a>

 <a class="tab-feed-filter-switch active bound" href="sample.com/fb" data-target="#filter-all">All</a>

 <a class="tab-feed-filter-switch active bound" href="sample.com/ig" data-target="#filter-ig">ig</a>

And i wish to append something like "?startDate=20160121&endDate=20160212":

  $("#appendHerf").click(function(){

   var href = $('a.tab-feed-filter-switch').attr('href') + '?startDate=20160121&endDate=20160212';

   $('a.tab-feed-filter-switch').attr('href', href);
});

The result of the methods above which is incorrect:

   <a class="tab-feed-filter-switch active bound" href="sample.com/ALLl&?startDate=20160121&endDate=20160212"  data-target="#filter-fb">FACEBOOK</a>

 <a class="tab-feed-filter-switch active bound" href="sample.com/ALL&?startDate=20160121&endDate=20160212" data-target="#filter-all">All</a>

 <a class="tab-feed-filter-switch active bound" href="sample.com/ALL&?startDate=20160121&endDate=20160212 data-target="#filter-ig">ig</a>

My exception is as below:

   <a class="tab-feed-filter-switch active bound" href="sample.com/ALL&?startDate=20160121&endDate=20160212"  data-target="#filter-fb">FACEBOOK</a>

     <a class="tab-feed-filter-switch active bound" href="sample.com/FB&?startDate=20160121&endDate=20160212" data-target="#filter-all">All</a>

     <a class="tab-feed-filter-switch active bound" href="sample.com/ig&?startDate=20160121&endDate=20160212 data-target="#filter-ig">ig</a>

The above method is working fine at my other program but because the plugin generate same class for all of them, it replace all the herf into a single duplicate herf , which i can't change it in html.

I am thinking about to get the date-target element and add new class to control it but i am not sure if this can work and maybe there's some better alternative to solve this issue.

This is my last question but it doesn't seem can solve my problem :Append new path in all the a href URL

There's only one button, when i click, append startDate&endDate in every herf we got. so the result should like /fb/startDate&endDate , /All/startDate&endDate but now it's like when i click on the button every href replace to /All/startDate&endDate.

You want to do like when you click on Facebook, you want to add startDate and EndDate in href right? — Paresh Gami, Feb 29 '16 at 02:36
There's only one button, when i click append startDate&endDate in every herf we got. so the result should like /fb/startDate&endDate , /All/startDate&endDate but now it's like when i click on the button every href replace to /All/startDate&endDate. — Anson Aştepta, Feb 29 '16 at 02:49
Assume there's fb, all and ig only, means there's 3 different url and now the function append startdate and enddate replace all 3 url to the same . — Anson Aştepta, Feb 29 '16 at 02:56
you said `add class depends on data-target`. But where you want to use it? — Murad Hasan, Feb 29 '16 at 03:08

score 1 · Accepted Answer · answered Feb 29 '16 at 03:02

Ah I see issue. The problem is that:

var href = $('a.tab-feed-filter-switch').attr('href') + '?startDate=20160121&endDate=20160212';

$('a.tab-feed-filter-switch').attr('href', href);

...is setting the same href for all your anchor tags. What you need to do is use the each() function provided by jQuery to individually update each anchor tag with it's relative href. Replace your click function with this:

$("#appendHerf").click(function(){
    $('a.tab-feed-filter-switch').each(function(){
        var href = $(this).attr('href') + '?startDate=20160121&endDate=20160212';
        $(this).attr('href', href);
    });
});

Murad Hasan · Answer 2 · 2016-02-29T08:45:56.027

1

you said add class depends on data-target. But where you want to use it?

HTML

<a class="tab-feed-filter-switch active bound" href="sample.com/ALL"  data-target="#filter-fb">FACEBOOK</a>

<a class="tab-feed-filter-switch active bound" href="sample.com/fb" data-target="#filter-all">All</a>

<a class="tab-feed-filter-switch active bound" href="sample.com/ig" data-target="#filter-ig">ig</a>

jQuery

$("#appendHerf").click(function(){
    $('a.tab-feed-filter-switch').each(function(){
        if($(this).attr('href').split("&")[1] == null){
            newHref = $(this).attr('href') + '?startDate=20160121&endDate=20160212';
            $(this).attr('href', newHref);
        }
    });
});

The Each function iterate for all the matching tags and using the this properties, its mean just the current tag that have to be change. In your case you did the mistake here.

Output:

<a class="tab-feed-filter-switch active bound" href="sample.com/ALL&?startDate=20160121&endDate=20160212"  data-target="#filter-fb">FACEBOOK</a>

<a class="tab-feed-filter-switch active bound" href="sample.com/FB&?startDate=20160121&endDate=20160212" data-target="#filter-all">All</a>

<a class="tab-feed-filter-switch active bound" href="sample.com/ig&?startDate=20160121&endDate=20160212" data-target="#filter-ig">ig</a>

edited Feb 29 '16 at 08:45

answered Feb 29 '16 at 03:14

Murad Hasan

9,565
2
21
42

An extend question is, how can I make a if statement to check if the statDate&endate is exist? – Anson Aştepta Feb 29 '16 at 05:01
You are just `concate` the dates, so where you want to check? – Murad Hasan Feb 29 '16 at 05:05
if startDate&endDate exist do not append again – Anson Aştepta Feb 29 '16 at 07:33
How to check and where to check for `startDate&endDate` exist or not? – Murad Hasan Feb 29 '16 at 07:37
check the .attr(href).text(); the href contains should be "sample.com/ig&?startDate=20160121&endDate=20160212" and check if it's sample.com/ig or sample.com/ig&?startDate=20160121&endDate=20160212 – Anson Aştepta Feb 29 '16 at 08:27

How to add class depends on data-target (Bootstrap)

2 Answers2