2015-10-25 2 views
0

Привет всем Я новый codeigniter Я хочу передать базу данных идентификаторов в jquery, но я не могу выполнить попытку поиска google youtube, но я все еще не могу Я застрял этот код через несколько дней, кто может мне помочь?Как передать базу данных id в jquery в codeigniter?

И это исходный код:

 <style> 
    @import url(http://fonts.googleapis.com /css?family=Open+Sans:400,300,600); 
    html { 
     border-top: 5px solid #fff; 
     background: #58DDAF; 
     color: #2a2a2a; 
    } 
    html, body { 
     margin: 0; 
     padding: 0; 
     font-family: 'Open Sans'; 
    } 
    h1 { 
     color: #fff; 
     text-align: center; 
     font-weight: 300; 
    } 
    .slider { 
     position: relative; 
     overflow: hidden; 
     margin: 20px auto 0 auto; 
     border-radius: 4px; 
    } 
    .slider ul { 
     position: relative; 
     margin: 0; 
     padding: 0; 
     height: 200px; 
     list-style: none; 
    } 
    .slider ul li { 
     position: relative; 
     display: block; 
     float: left; 
     margin: 0; 
     padding: 0; 
     width: 500px; 
     height: 300px; 
     background: #ccc; 
     text-align: center; 
     line-height: 300px; 
    } 
    .slider ul li img{ 
     width: 100%; 
    } 
    a#control_prev, a#control_next { 
     position: absolute; 
     top: 40%; 
     z-index: 999; 
     display: block; 
     padding: 4% 3%; 
     width: auto; 
     height: auto; 
     background: #2a2a2a; 
     color: #fff; 
     text-decoration: none; 
     font-weight: 600; 
     font-size: 18px; 
     opacity: 0.8; 
     cursor: pointer; 
    } 
    a#control_prev:hover, a#control_next:hover { 
     opacity: 1; 
     -webkit-transition: all 0.2s ease; 
    } 
    a#control_prev { 
     border-radius: 0 2px 2px 0; 
    } 
    a#control_next { 
     right: 0; 
     border-radius: 2px 0 0 2px; 
    } 
    .slider_option { 
     position: relative; 
     margin: 10px auto; 
     width: 160px; 
     font-size: 18px; 
    } 
     </style> 
     <script src="<?php echo base_url().'./style/jquery.js'; ?>"></script> 
    </head> 
    <body> 
     <script> 
      jQuery(document).ready(function ($) { 
      var slideCount = $('#slider2 ul li').length; 
      var slideWidth = $('#slider2 ul li').width(); 
      var slideHeight = $('#slider2 ul li').height(); 
      var sliderUlWidth = slideCount * slideWidth; 
      $('#slider2').css({ width: slideWidth, height: slideHeight }); 
      $('#slider2 ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 
      $('#slider2 ul li:last-child').prependTo('#slider2 ul'); 
      function moveLeft() { 
       $('#slider2 ul').animate({ 
        left: + slideWidth 
       }, 200, function() { 
        $('#slider2 ul li:last-child').prependTo('#slider2 ul'); 
        $('#slider2 ul').css('left', ''); 
       }); 
      }; 
      function moveRight() { 
       $('#slider2 ul').animate({ 
        left: - slideWidth 
       }, 200, function() { 
        $('#slider2 ul li:first-child').appendTo('#slider2 ul'); 
        $('#slider2 ul').css('left', ''); 
       }); 
      }; 
      $('a.control_prev1').click(function() { 
       moveLeft(); 
      }); 

      $('a.control_next1').click(function() { 
       moveRight(); 
      }); 
     }); 
     </script> 
     <div id="slider2" class="slider"> 
      <a href="#" id="control_next" class="control_next1">>></a> 
      <a href="#" id="control_prev" class="control_prev1"><</a> 
      <ul> 
      <li><img src="<?php echo base_url().'./images/events/ll.png' ?>"></li> 
      <li style="background: #aaa;"><img src="<?php echo base_url().'./images/events/blue.jpg' ?>"></li> 

      <li style="background: #aaa;"><img src="<?php echo base_url().'./images/events/red.jpg' ?>"></li> 
      </ul> 
     </div> 
     </body> 
     </html> 

И я стараюсь передать ID, но его не работает, помогите мне пожалуйста:

My database: events 

      id image image2 image3 
      1 1a.jpg 2a.jpg 3a.jpg 
      2 1b.jpg 2b.jpg 3b.jpg 
      3 1b.jpg 2c.jpg 3c.jpg 


    <?php $query = $this->db->get('events'); ?> 
<?php foreach($query->result() as $val): ?> 
<script> 
    jQuery(document).ready(function ($) { 
    var id = "#slider<?php echo $val->id; ?>"; 
    var ida = ".control_next<?php echo $val->id; ?>"; 
    var idb = ".control_prev<?php echo $val->id; ?>"; 


    var slideCount = $(id + ' ul li').length; 

    var slideWidth = $(id + ' ul li').width(); 
    var slideHeight = $(id + ' ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $(id).css({ width: slideWidth, height: slideHeight }); 

    $(id + ' ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $(id + ' ul li:last-child').prependTo(id + ' ul'); 
    function moveLeft() { 
     $(id + ' ul').animate({ 
      left: + slideWidth 
     }, 200, function() { 
      $(id + ' ul li:last-child').prependTo(id + ' ul'); 
      $(id + ' ul').css('left', ''); 
     }); 
    }; 
    function moveRight() { 
     $(id + ' ul').animate({ 
      left: - slideWidth 
     }, 200, function() { 
      $(id + ' ul li:first-child').appendTo(id + ' ul'); 
      $(id + ' ul').css('left', ''); 
     }); 
    }; 
    $('a.control_prev ' + idb).click(function() { 
     moveLeft(); 
    }); 

    $('a.control_next ' + ida).click(function() { 
     moveRight(); 
    }); 
}); 
</script> 
<div id="slider<?php echo $val->id; ?>" class="slider"> 
    <a href="#" id="control_next" class="control_next<?php echo $val->id; ?>">>></a> 
    <a href="#" id="control_prev" class="control_prev<?php echo $val->id; ?>"><</a> 
    <ul> 
    <li><img src="<?php echo base_url().'./images/events/'.$val->image; ?>"></li> 
    <li style="background: #aaa;"><img src="<?php echo base_url().'./images/events/'.$val->image2; ?>"></li> 

    <li style="background: #aaa;"><img src="<?php echo base_url().'./images/events/'.$val->image3; ?>"></li> 
    </ul> 
</div> 
<?php endforeach; ?> 
+0

Пожалуйста сузить свой код и добавить, где именно проблема. –

+0

ok wait Niranjan N Raju Редактирование кода – user307709

+0

Привет, Ниранджан N Раджу Я пытаюсь научиться делать. Не могли бы вы мне помочь? – user307709

ответ

1

Где бы вы используете id вы должны использовать конкатенацию оператор. И ales remo круглые скобки для id. Не нужно этого.

var slideCount = $(id + ' ul li').length; 
        ^^// add a space here. 
var slideWidth = $(id + 'ul li').width(); 
var slideHeight = $(id + 'ul li').height(); 

Я дал только для 3-х рядов, пожалуйста, изменить его во всех необходимых местах в вашем JQuery

$('a.' + idb).click(function() { 
    moveLeft(); 
}); 

$('a.' + ida).click(function() { 
    moveRight(); 
}); 
+0

Я пытаюсь изменить все, но все еще не работает :(. И вы можете видеть, что у меня код – user307709

+0

небольшая ошибка, добавьте пробел перед 'ul', i ll обновить в ответ –

+0

или когда вы берете идентификатор, объедините пробел в id. –