2

jQueryで基本的なスライダーを作成しようとしています。ページに表示される5つの主要なセクションがあり、コンテナdivにカーソルを合わせると、最初と最後の要素に矢印がポップアップ表示されます。

次のステップは、div（クリック側に応じて左または右）を配列に格納するコードを記述し、それをDOMから削除することです。ただし、クリックイベントに結び付けるのに問題があります。

これが私のCSSです：

.left_arrow_background {
 height: 175px;
width: 65px;
/* background:url(../images/left-arrow.png) no-repeat; */
background:#ccc;
opacity: .9;
position: absolute;
cursor: pointer;
z-index: 2;
}

.right_arrow_background {
height: 175px;
width: 65px;
/* background:url(../images/right-arrow.png) no-repeat;*/
background:#ccc;
z-index: 2;
opacity: .9;
position: relative;
left:890px;
cursor: pointer;
}
.boomers_scroller {
height:275px;
padding-left:1px;
display:block;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
    overflow:hidden;
}
.all-boomers {
display: block;
float: left;
height: 225px;
margin-bottom: 20px;
margin-left: 20px;
width: 175px;
}

そして、出力されるHTML：

<div class="all-boomers">
<a href="/boomers/profile/id/2"><img src="/images/users/medium_thumbs/4fa44866c3561.jpg" alt=""/></a>
      <p class="boomers_name">PC Guy</p>
      <p class="activity_name">IT Guy PC Repair</p>
    </div>
<!-- three more identical section here -->
<div class="all-boomers">
<a href="/boomers/profile/id/6"><img src="/images/users/medium_thumbs/4fa62dff64c44.jpg" alt=""/></a>
      <p class="boomers_name">Cruella Deville</p>
      <p class="activity_name">Dalmation Dog-Sitter</p>
    </div>

スタイルシートから削除z-indexしても、クリックイベントを記録できないようです。これまでの私のjsファイルは次のとおりです。

$(document).ready(function() {

  var boomers = $('.all-boomers');
  var boomersLength = boomers.length;
  var boomersContainer = {};
  $(".all-boomers:eq(4)").attr('id','right-boomer');
  $(".all-boomers:eq(0)").removeClass("all-boomers").addClass("one-fifth first").attr('id','left-boomer');
  var image_left = '<div class="left_arrow_background"></div>';
  var image_right = '<div class="right_arrow_background"></div>';

  $(".boomers_scroller").hover(  
    function(){
        $(image_left).insertBefore('#left-boomer');
        $(image_right).insertAfter('#right-boomer');
    },
    function(){
        $('.left_arrow_background').remove();
        $('.right_arrow_background').remove();
    });

  $("div.left_arrow_background").click(function(){
    var left_boomer = $('#left-boomer').children();
    // store left_boomer in boomerscontainer, then remove it from dom
    console.log('clicked!');

  });
 });

クリックイベントだけではありません...他のマウスイベントも試しましたが、コンソールテストメッセージをトリガーするものは何もありません。または、.click関数内にコードを配置しても、コードはトリガーされません。

編集：4番目を追加（関連するcssスタイル）

4

2 に答える 2

0

ready（）関数を閉じるのを忘れました（またはここに貼り付ける前にコピーします:)もう1つ追加します}）; このコードの最後に。ここで分離されています：http： //jsfiddle.net/Q3rDz/

于 2012-05-10T05:40:01.617 に答える
-1

修理済み！クリックしているときにホバーイベントがまだ発生しているため、ホバーイベント内にクリックイベントをネストすると問題が解決します。

$(document).ready(function() {
var boomers = $('.all-boomers');
var boomersLength = boomers.length;
var boomersContainer = {};
$(".all-boomers:eq(4)").attr('id','right-boomer');
$(".all-boomers:eq(0)").removeClass("all-boomers").addClass("one-fifth first").attr('id','left-boomer');
var image_left = '<div class="left_arrow_background"></div>';
var image_right = '<div class="right_arrow_background"></div>';
$(".boomers_scroller").hover(       function(){ 
     $(image_left).insertBefore('#left-boomer');
     $(image_right).insertAfter('#right-boomer');
     $("div.left_arrow_background").click(function(){
           var left_boomer = $('#left-boomer').children();
          // store left_boomer in boomerscontainer, then remove it from dom
          console.log('clicked!');    });
 }, 
function(){ 
    $('.left_arrow_background').remove();
     $('.right_arrow_background').remove();
 });
 });
于 2012-05-10T16:27:14.530 に答える