根据jquery中的元素“value”更改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!).