動態背景圖片建議

Question

我正在創建一個網站，用戶可以在那裏上傳自己的背景圖片，上傳後他們看到他們上傳的每個背景都是由一個數字表示的菜單，點擊數字將會在理論上加載到新的背景中，但是我注意到這是否也再次調用視圖（視圖已經從另一個函數加載，有沒有一種方法可以將數據傳遞到視圖而不加載視圖，我可以用ajax來做到嗎？如果是這樣的話？如何

我的代碼目前

public function set_background() { 
     $this->load->model('image_model'); 
     if($query = $this->image_model->get_background_by_id($this->uri->segments[3])) { 
      if($query) { 
       $data['new_background'] = $query; 
      } 
     } 
     $this->load->view('template/background-select', $data); 
    } 

我的模型：

public function get_background_by_id($background_id) { 
    $this->db->select('background_name'); 
    $this->db->from('background'); 
    $this->db->where('background_id', $background_id); 

    $query = $this->db->get(); 
    return $query->result_array(); 
} 

我查看

<div id="background-select"> 


    <?php 
     $count = 0; 
      if(isset($special)) { 
       foreach ($special as $row) { 
        $count ++; 
        print '<div class="select">'; 
         print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>"; 
        print '</div>'; 
        if($count == 1) { 
         $background = $row['background_name']; 
        } 

       } 
      } 
      if(isset($generic)) { 
       foreach ($generic as $row) {  
        $count ++; 
        print '<div class="select">'; 
         print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>"; 
        print '</div>'; 
        if($count == 1) { 
         $background = $row['background_name']; 
        } 

       } 
      } 
      if(isset($user_background)) { 
       foreach ($user_background as $row) { 
       $count ++; 
        print '<div class="select">'; 
         print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>"; 
        print '</div>'; 
        if($count == 1) { 
         $background = $row['background_name']; 
        } 

       } 
      } 
     ?> 
    </div> 
    <div id="wrapper" style=<?php echo"background:url(/media/uploads/backgrounds/".$background.");";?>> 

視圖獲取原本這裏裝

public function index() { 
    // $this->output->enable_profiler(TRUE); 
     $data = array(); 
     if($query = $this->category_model->get_all_online()) { 
      $data['main_menu'] = $query; 
     } 
     $this->load->model('image_model'); 
     /* 
     * Sort out the users backgrounds, basically do a check to see if there is a 'special' background 
     * if there is not a 'special' background then IF the user is logged in and has a background of there 
     * own show that one, if not show a generic one, if they are not logged in show a bang one 
     */ 
     $image = array(); 
     if ($query = $this->image_model->get_special_backgrounds()) { 
      $image['special'] = $query; 
     } elseif(!isset($image['special']) && !isset($this->session->userdata['user_id'])) { 
      if($query = $this->image_model->get_bang_background()) { 
       $image['generic'] = $query; 
      } 
     } 

     if(isset($this->session->userdata['user_id'])) { 
      if($query = $this->image_model->get_user_backgrounds($this->session->userdata['user_id'])) { 
       $image['user_background'] = $query; 
      } 
     } 
     $data = array_merge($data, $image); 
     $this->load->view('home/main_page.php', array_merge($data, $image)); 
    } 

希望一些可以幫助感謝

Answer 1

這可能是太「開箱即用」，而不是忠實於你的代碼是有用的，但這裏有：

給定對代碼應該做什麼的描述，你總是可以讓PHP將背景圖像的列表輸出到視圖上的JavaScript代碼片段中（非常粗略地僞代碼：<script><?php echo phpArrayToJavaScriptArray($images, $varName); ?></script>），然後讓JavaScript動態地創建你的背景列表 - 改變鏈接客戶端和每次點擊只是改變背景圖像的JavaScript（<a href="javascript:changeBackgroundImage('url')">設置document.getElementById('wrapper')的背景圖像）。

沒有必要的Ajax。

帶着這種理念，你的代碼最簡單的調整，我可以在匆忙concot是這樣的：

不是傳遞的ID到視圖，通過URL來視圖（你必須調整相應的查詢，當然），並更改：

"<a 
    class='background_btn' 
    href='index.php/home/set_background/" . $row['background_id'] . "'>" 
    . $count 
. "</a>" 

喜歡的東西

"<a 
    class='background_btn' 
    href=\"javascript:changeBackgroundImage('" 
    . htmlspecialchars($row['background_url'], ENT_QUOTES, 'utf-8') 
    . "')\">" 
    . $count 
. "</a>" 

JavaScript函數將是這樣的：

<script language="javascript"> 
function changeBackgroundImage(url) { 
    var wrapper = document.getElementById('wrapper'); 
    wrapper.style = "background-image:url(" + url + ")"; 
} 
</script> 

心目中，很多的仍是僞的，我懷疑它會運行開箱即用，我的JS是很生疏，這意味着是一個想法，份額超過徹底修復。 :)但我希望它能幫助你解決你的問題！

這種方法對您是否可行？