根据jQuery中的元素“值”更改HREF链接

Question

I have the following PHP that returns records from a my MYSQL table. These records are displayed as LINKS. See code below...

        <div class="slide1" id="u1026">

        <?php while ($row = mysql_fetch_array($query_rental)) {
        echo "<a class='fancybox fancybox.iframe' id='rental' value={$row['layout']} href=\"brochures\items-rental.php?id={$row['client_name']}\"></a>"; 
        }?>                 

        </div>

What I would like, is for the HREF link to change to

\\"brochures\\items-rental-layout2.php?id={$row['client_name']}\\

If VALUE contains the text "layout2". I know that I can change HREF using jquery code

$(document).ready(function () {  
  $("#event").attr("href", "http://the.new.url")
});

I'm just not sure how to do that depending if the VALUE contains text "layout2". Any help is much appreciated. Thanks

Answer 1

You can just do it straight in the PHP code:

while ($row = mysql_fetch_array($query_rental)) {
  $layoutFlag = $row['layout'] == 'layout2' ? '-layout2' : '';
  echo "<a class='fancybox fancybox.iframe' id='rental' value=\"{$row['layout']}\" href=\"brochures\items-rental{$layoutFlag}.php?id={$row['client_name']}\"></a>"; 
}

You could also do it with Javascript:

$(function () {
  // I'm assuming you are going to turn it into a rental class, otherwise change the selector to whatever.
  $("a.rental").each(function() {
    var rentalItem = $(this);
    if (rentalItem.attr('value') === 'layout2') {
      // You can choose what to replace, as long as you know it will replace EXACTLY what you want it to. I'm just going with Regex's ^ (start-of-line) operator to make sure that what we are replacing is at the start of the line...
      rentalItem.attr('href', rentalItem.attr('href').replace(/^brochures\\items\-rental/, 'brochures\\items-rental-layout2'));
  });
});

As you can see, just doing it in PHP is so much easier.

Also as a side note, you are creating multiple elements with the same id . Maybe you meant class='fancybox fancybox.iframe rental' ?

And as a second side note, I suggest using the data- prefix for holding custom data. In layout's case, use data-layout='layout-whatever' . You can then use .attr('data-layout') to get the layout attribute (it's easier to understand what that code is doing too!).

Answer 2

You can either run the IF statement on the PHP loop

while ($row = mysql_fetch_array($query_rental)) {
    echo "<a class='fancybox fancybox.iframe' id='rental' value={$row['layout']} href=\"brochures\items-rental".($row['layout'] == 'layout2' ? '-layout2' : '').".php?id={$row['client_name']}\"></a>"; 
} 

Or by jQuery

$( "a.fancybox" ).each(function( index ) {
    if($(this).val() == "layout2") {
       oldHref = $(this).attr('href');
       newHref = oldHref.replace('items-rental.php', 'items-rental-layout2.php')
       $(this).attr('href', newHref);
    }
});

• all your links have the same ID which can cause some issues when you wuold want to work with them with jQuery.

• If you have more a tags with the fancybox class, try adding a unique class to these tags and update the each loop