這種情況下的最佳實踐是什麼 - jQuery＆CSS？

我對web開發相當陌生，所以我不確定這是否是實現此任務的最有效方式。這種情況下的最佳實踐是什麼 - jQuery＆CSS？

我目前正在編寫一個在線商店，在產品頁面上，我從數據庫後端獲取了大量的產品。我然後使用結果數組生成，以輸出動態HTML/CSS：當你在「詳細信息」，點擊它應該調用jQuery的對話功能爲每個特定的產品，以打開

while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) { 
    echo(' 
     <div class="box"> 
      <div class="product"><img src="upload/' . $row['prod_image'] . '" /></div> 
      <h3> ' . $row['prod_title'] . '</h3> 
      <div class="create-user"> 
       <p>More Details...</p> 
      </div> 
      <div class="dialog" title="Basic dialog"> 
       <p><img src="upload/class.png"/>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the x icon.</p> 
      </div> 
      <p class="price">Price: <span class="red">£' . $row['prod_price'] . '</span></p> 
      <div><a href="#"></a> <a href="#"><img src="images/addtocart.gif" border="0" /></a></div> 
      <div class="clearfloat"></div> 
     </div>' 
    ); 
}

現在「對話」標籤，但這似乎只適用於第一個產品而非其他產品。

JS代碼：

$(function() { 
    $("#dialog").dialog({ 
     autoOpen: false 
    }); 
    $('#create-user').click(function() { 
     $('#dialog').dialog('open'); 
    }); 
});

我設法解決這個問題，但它似乎是一個骯髒的方式，這就是我所做的。我添加了一個獨特的DIV ID每個產品，然後讓他們在線使用JavaScript使用增量：

$incr = 1; 
while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) { 
    echo(' 
     <div class="box"> 
      <div class="product"><img src="upload/' . $row['prod_image'] . '" /></div> 
      <h3> ' . $row['prod_title'] . '</h3> 
      <div id="create-user' . $incr . '"> 
       <p>More Details...</p> 
      </div> 
      <p class="price">Price: <span class="red">£' . $row['prod_price'] . '</span></p> 
      <div><a href="#"></a> <a href="#"><img src="images/addtocart.gif" border="0" /></a></div> 
      <div id="dialog' . $incr . '" title="Basic dialog"> 
       <p><img src="upload/class.png"/>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the x icon.</p> 
      </div> 
      <div class="clearfloat"></div> 
     </div>' 
    ); 
    $incr++; 
}

而且JS去的是：

$(function() { 
    var diag_num = 0; 
    while(diag_num < 4) { 
     diag_num +=1; 
     $("#dialog" + diag_num).dialog({ 
      autoOpen: false 
     }); 
     $('#create-user' + diag_num).click(function() { 
      $('#dialog' + diag_num).dialog('open'); 
     }); 
    } 
});

雖然這種方法對一組正常工作每頁產品的數量，這樣做沒有問題，因爲我每頁只有10個左右（所以我知道我的變長），我不禁認爲這是一個不好的方法。

我也研究過使用「div類」，然後將所有產品分配給同一個類，使用jQuery類選擇器來查找類「create-user」，然後使用「父」方法爬上DOM樹找到下一個「對話」類。這很有效，但是當你打開一個對話框時，它會在頁面上打開每個產品的一個對話框，因此我推理使「DIVS」變得獨一無二。

我希望這是有道理的。

來源

2013-02-18 d1ll1nger

重做你的JQuery。類由（'.classname'）選擇。你目前選擇ID – Vogel612 2013-02-18 16:04:53

你應該考慮使用模板引擎，如** [Twig]（http://twig.sensiolabs.org）**。隨着你的代碼變得越來越複雜，維護這些巨大的'echo'塊將不會更容易。 – insertusernamehere 2013-02-18 17:21:07

@insertusernamehere謝謝，我完全贊成。我會看一看。 – d1ll1nger 2013-02-18 19:51:30

$('.create-user').click(function(){ 
$(this).siblings('.dialog').dialog('open'); 
});

這應該與您發佈的第一個代碼示例一起使用。

點擊它選擇下一個類對話框的項目並打開它。

$(this)此處代表點擊「更多詳情...」。兄弟姐妹（）獲取姐妹兄弟，如果你添加一個選擇器，它會通過給定的選擇器對它們進行過濾。因爲您已將項目包裝在一個框中，所以不應選擇其他對話框。

來源

2013-02-19 08:09:24 Vogel612

這種情況下的最佳實踐是什麼 - jQuery＆CSS？

回答

相關問題