Question

大家好我是一个新的codeigniter我想将ID数据库传递到jquery但我不能这样做我尝试搜索google youtube但我还是不能我有几天坚持这段代码可以帮助我吗？

这是原始代码：

     <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>

我尝试传递身份证，但不能正常帮助我：

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; ?>

Answer 1

无论您使用id，都应该使用连接运算符。另外还有id的remo括号。没必要。

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();
});

如何在codeigniter中将id数据库传递给jquery？

1 个答案: