jQuery切換div類上點擊不工作

我想從頭開始做一個滾動視圖，其上有5個項目，我使用div標籤爲這些項目結合jQuery和CSS類。jQuery切換div類上點擊不工作

點擊事件正在觸發，但由於某種原因未設置新類（圓應該是白色），並且它恢復爲其默認顏色。

我使用引導3和最新的jQuery

HTML

<div class="row-fluid"> 

     <div class="col-md-1"></div> 

     <div class="col-md-2"> 
      <div class="circle 1" id="circle_1> 

      </div> 
     </div> 

     <div class="col-md-2"> 
      <div class="circle 2" id="circle_2"> 

      </div> 
     </div> 

     <div class="col-md-2"> 
      <div class="circle 3" id="circle_3"> 

      </div> 
     </div> 

     <div class="col-md-2"> 
      <div class="circle 4" id="circle_4"> 

      </div> 
     </div> 

     <div class="col-md-2"> 
      <div class="circle 5" id="circle_5"> 

      </div> 
     </div> 

     <div class="col-md-1"></div> 

    </div>

CSS

/* CSS used here will be applied after bootstrap.css */ 


.circle-selected{ 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    background: #ffffff; 
    cursor: pointer; 
} 

.circle { 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    background: #949494; 

    -webkit-transition: all ease .3s; 
    -moz-transition: all ease .3s; 
    -o-transition: all ease .3s; 
    transition: all ease .3s; 
    font-family: 'Corbel Bold'; 
    /* width and height can be anything, as long as they're equal */ 
} 

.circle:hover{ 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    background: #ffffff; 
    cursor: pointer; 
}

jQuery的

$(".circle").click(function(){ 
     var ID = $(this).attr('class').replace('circle ', ''); 
     //alert('called 1'); 

     $("#circle_" + ID).addClass('circle ' + ID).removeClass('circle-selected ' + ID); 

    }); 

    $(".circle-selected").click(function(){ 
     var ID = $(this).attr('class').replace('circle-selected ', ''); 
     //alert('called 2'); 
     $("#circle_" + ID).addClass('circle-selected ' + ID).removeClass('circle ' + ID); 

    });

例子是最好的所以這裏是我的：http://www.bootply.com/6qrSq5KvkK

有人可以指出我在這裏做錯了什麼？我試圖.switchClass，它不工作，所以通過這樣搜索，我發現這裏jQuery UI switchClass() method is not working properly暗示的答案，我應該更換

.switchClass

隨着

addClass('square').removeClass('circle');

來源

2015-01-02 Petar-Krešimir

1）爲什麼在ID值中使用「空格」？嘗試用下劃線替換空格。 2）嘗試先刪除課程，然後再添加其他課程。 –

不能使用空間ID。 jQuery選擇器會認爲它是一個後代對象！

例如，如果你有

<div class="ancestor"> 
     <div class="child"> 
     </div> 
</div>

兒童

$(".ancestor .child")

jQuery選擇的空間意味着後代對象。在你的情況，jQuery是找對象< 3>一個元素中id爲圈

來源：http://www.w3schools.com/cssref/css_selectors.asp

編輯：

你也不需要添加的ID在類屬性中。願它爲你工作：

var ID = $.trim($(this).attr('class').replace('circle-selected', '').replace('circle', '')); 
    $("#circle_" + ID).toggleClass('circle').toggleClass('circle-selected');

看到這個JSFiddle

來源

2015-01-02 23:11:41 nanndoj

謝謝，我不知道。我修復了ID標籤（我忘了更改代碼片段中的ID，也編輯了它）。但我仍然面臨着問題。 –

你的班名也有空位！我不認爲你需要通過查看你的CSS來將ID放在類名中。 – nanndoj

我正在使用這個問題作爲參考http：// stackoverflow。com/questions/5563783/jquery-class-click-multiple-elements-click-event-once（answer number two）關於如何處理類單擊事件。所以我不允許在類中使用空格？那麼我怎麼知道哪些圈子被點擊了，我需要以某種方式傳遞ID？ –

在「id」屬性空格是不合法的HTML，將其更改爲下劃線或短劃線，並應解決的問題。

<div class="circle" id="circle_1">

來源

2015-01-02 23:14:13 patt

jQuery切換div類上點擊不工作

回答

相關問題