如果PHP存在元素，則添加寬度;如果不是，請不要

Question

我正在設置一個水平滾動網站，索引展覽。一部分需要有一個視頻，我不能在Indexhibit CMS後端（它將它添加到寬div的寬度）中設置，因此我需要將它添加到PHP生成文件中。基本上，它需要檢查是否存在ID爲vid的元素。如果是這樣，它應該添加vid_width和vid_right_padding到最後的寬度，final_img_container。如果沒有，應該排除。帶有視頻的網站可以在這裏找到：http://www.allisonnavon.com/index.php?/projects/the-alka-seltzer-challenge/正如你在這裏看到的那樣，寬度是完美的，但是當其他頁面加載時，每個項目右端會有800多個額外的像素。

下面是代碼：

<?php if (!defined('SITE')) exit('No direct script access allowed'); 

/** 
* Horizontal Format 
* 
* Exhbition format 
* Originally created for SharoneLifschitz.com 
* 
* @version 1.1 
* @author Vaska 
*/ 

$DO = new Horizontally; 

$exhibit['exhibit'] = $DO->createExhibit(); 
$exhibit['dyn_css'] = $DO->dynamicCSS(); 

class Horizontally 
{ 
    // PADDING AND TEXT WIDTH ADJUSTMENTS UP HERE!!! 
    var $picture_block_padding_right = 25; 
    var $text_width = 250; 
    var $text_padding_right = 75; 
    var $vid_width = 800; 
    var $vid_padding_right = 25; 
    var $final_img_container = 0; // do not adjust this one 

    function createExhibit() 
    { 
     $OBJ =& get_instance(); 
     global $rs; 

     $pages = $OBJ->db->fetchArray("SELECT * 
      FROM ".PX."media, ".PX."objects_prefs 
      WHERE media_ref_id = '$rs[id]' 
      AND obj_ref_type = 'exhibit' 
      AND obj_ref_type = media_obj_type 
      ORDER BY media_order ASC, media_id ASC"); 

     if (!$pages) return $rs['content']; 

     $s = ''; $a = ''; $w = 0; 
     $this->final_img_container = ($rs['content'] != '') ? ($this->text_padding_right + $this->text_width + $this->vid_padding_right + $this->vid_width) : 0; 

     foreach ($pages as $go) 
     { 
      $title = ($go['media_title'] == '') ? '' : "<div class='title'>" . $go['media_title'] . "</div>"; 
      $title .= ($go['media_caption'] == '') ? '' : "<div class='caption'>" . $go['media_caption'] . "</div>"; 

      $temp_x = $go['media_x'] + $this->picture_block_padding_right; 
      $this->final_img_container += ($go['media_x'] + $this->picture_block_padding_right); 

      $a .= "<div class='picture_holder' style='width: {$temp_x}px;'>\n"; 
      $a .= "<div class='picture' style='width: {$go[media_x]}px;'>\n"; 
      $a .= "<img src='" . BASEURL . GIMGS . "/$go[media_file]' width='$go[media_x]' height='$go[media_y]' alt='" . BASEURL . GIMGS . "/$go[media_file]' />\n"; 
      $a .= "<div class='captioning'>$title</div>\n"; 
      $a .= "</div>\n"; 
      $a .= "</div>\n\n"; 
     } 

     $s .= "<div class='text'><div class='scroller'><span><a href='javascript:void(0);' class='prev'>&laquo;</a></span><span class='title'><a href='javascript:void(0);' class='origin'><%title%></a></span><span><a href='javascript:void(0);' class='next'>&raquo;</a></span></div><div id='img-container'>\n"; 
     if ($rs['content'] != '') $s .= "<div id='text'>" . $rs['content'] . "</div>\n"; 
     $s .= $a; 
     $s .= "<div style='clear: left;'><!-- --></div>"; 
     $s .= "</div></div>\n"; 

     return $s; 
    } 


    function dynamicCSS() 
    { 
     return "#img-container { width: " . ($this->final_img_container + 1) . "px; } 
#img-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; } 
#img-container #text p { width: " . $this->text_width . "px; } 
#img-container #vid { float: left; width: " . ($this->vid_width + $this->vid_padding_right) . "px; } 
#img-container #vid p { width: " . $this->vid_width . "px; } 
#img-container .picture_holder { float: left; } 
#img-container .picture { /* padding-top: 10px; */ } 
#img-container .captioning .title { margin-top: 12px; font-weight: bold; } 
#img-container .captioning .caption { font-family:PerspectiveSansItalic; 
    font-size:11px; color: #444; padding-top: 10px;}"; 
    } 
} 

Answer 1

是不是更好加載頁面時使用JavaScript來解決這個問題？

只需找到id爲「vid」的div並添加正確的css即可。就像：

$(function() { 
    $("div#vid").load(function() { 
     $(this).addClass("whateverclassyouwanttoadd"); 
    }) 
} 

我不是一個jquery大師，但我認爲這將解決您的問題。

只是一些旁觀者：我認爲最好讓您的演示文稿與業務邏輯分離。因此，使用樣式表來標記您的HTML並在您的視圖/業務邏輯中將類添加到您的HTML中。

只是我的2美分

祝你好運！