Question

我基本上希望访问者能够点击图片并改变背景：

<div class="box1">     
    <ul id="bgbg">
       <li id="bg1"><a href="#"></a> </li>
       <li id="bg2"><a href="#"></a> </li>
       <li id="bg3"><a href="#"></a> </li>    
</ul> </div>


$(document).ready(function() { 
   $( "#bgbg > li" ).click(function() {
      $( 'body' ).removeClass('bg1 bg2 bg3');
      $( 'body' ).addClass( $(this).attr('id') );
   });
});

但它不起作用......

编辑：这是由于jQuery的wordpress兼容模式 - Link

jQuery(document).ready(function() { 
   jQuery( "#bgbg > li" ).click(function() {
      jQuery( 'body' ).removeClass('bg1 bg2 bg3');
      jQuery( 'body' ).addClass( jQuery(this).attr('id') );
   });
});

Answer 1

我相信你在选择器中有错误。它应该是：

surveydata = Survey::select(
    'surveys.*', 
    'surveys.id as surveys_id',
    'industries.*', 
    'industries.id as industries_id'
)->where('surveys.active_status', '=','1')
-> join (
    'industries', 
    'industries.id', 
    '=',
    'surveys.survey_industry_id'
)->orderBy('surveys.id','desc')
->paginate(12);

Answer 2

选择元素时出错：使用我在此代码中使用的方式（您也可以使用此代码添加att）：

    <script>
          $('your element #id or .class or name').attr('att name','value');
    </script>

Answer 3

我最近做了类似的事情并采用了这种方法

<div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-default waves-effect bg-btn" data-img="bg1.jpg">1</button>
    <button type="button" class="btn btn-default waves-effect bg-btn" data-img="bg2.jpg">2</button>
    <button type="button" class="btn btn-default waves-effect bg-btn" data-img="bg3.jpg">3</button>
</div>


$(document).ready(function(){
        $('.bg-btn').click(function(){
        var img = 'images/' + $(this).data('img');
        $('body').css('background-image', 'url('+ img + ')');
        console.log(img);
    });
});

可能会帮助你。

Answer 4

这是一个有效的例子

＆＃13;

$(document).ready(function() { 
  
  $( "#bgbg > li" ).click(function() {
      $( 'body' ).removeClass('bg1 bg2 bg3');
      $( 'body' ).addClass($(this).attr('id')) ;
      alert($(this).attr('id'));
   });
});

＆＃13;

#bg1{
width:60px;
height:60px;
background:url('https://www.w3schools.com/css/trolltunga.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}


#bg2{
width:60px;
height:60px;
background:url('http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}


#bg3{
width:60px;
height:60px;
background:url('http://i.dailymail.co.uk/i/pix/2014/12/19/2429637D00000578-0-image-a-284_1419003100839.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}

.bg1{
background:url('https://www.w3schools.com/css/trolltunga.jpg');
}


.bg2{
background:url('http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg');
}


.bg3{
background:url('http://i.dailymail.co.uk/i/pix/2014/12/19/2429637D00000578-0-image-a-284_1419003100839.jpg');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div class="box1">     
    <ul id="bgbg">
       <li id="bg1"><a href="#"></a> </li>
       <li id="bg2"><a href="#"></a> </li>
       <li id="bg3"><a href="#"></a> </li>    
</ul> </div>
</body>

＆＃13;

单击图片时更改背景

4 个答案: