Home php c# sql c c++ javascript python java go android git linux asp.net django .net node.js ios xcode cocoa iphone mysql tomcat mongodb bash objective-c scala visual-studio apache elasticsearch jar eclipse jquery ruby-on-rails ruby rubygems android-studio spring lua sqlite emacs ubuntu perl docker swift amazon-web-services svn html ajax xml java-ee maven intellij-idea rvm macos unix css ipad postgresql css3 json windows-server vue.js typescript oracle hibernate internet-explorer github tensorflow laravel symfony redis html5 google-app-engine nginx firefox sqlalchemy lucene erlang flask vim solr webview facebook zend-framework virtualenv nosql ide twitter safari flutter bundle phonegap centos Register | Login | Edit Tags | New Questions | 繁体 | 简体


10 questions online user: 23

0
votes
answers
9 views
+10

Jquery的3個datepickers一起

-2

我創建2個日期選擇器輸入字段上的左側,第一是日期,第二個是TO日期和我還創建與datepicker類一個div顯示在右側日期選擇日曆,以便前兩個輸入字段我用這個Jquery的3個datepickers一起

$(function() { 
    $('#datepickerSickFrom').datepicker({ 
    dateFormat: 'dd/mm/yy', 
    onSelect: function(dateText, inst) { 
     $('#dateTo').datepicker('option', 'minDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); 
    } 
    }); 

    $('#datepickerSickTo').datepicker({ 
    dateFormat: 'dd/mm/yy', 
    onSelect: function(dateText, inst) { 
     $('#dateFrom').datepicker('option', 'maxDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); 
    } 
    }); 
}); 

,現在我想這兩個輸入要連接到我創建的第三日期選擇器的div,我怎麼想這樣做呢?

這是我的HTML

<div class="group"> 
    <p class="inputIcon"><i class="fa fa-calendar" aria-hidden="true"></i></p> 
    <input type="text" class="setLabel datepicker" placeholder="11/30/2017" id="datepickerSickFrom"> 
    <i class="fa fa-caret-down" style="position: absolute;right: 0;top: 17px;" aria-hidden="true"></i> 
</div> 
<div class="group"> 
    <p class="inputIcon"><i class="fa fa-calendar" aria-hidden="true"></i></p> 
    <input type="text" class="setLabel datepicker" placeholder="11/30/2017" id="datepickerSickTo"> 
    <i class="fa fa-caret-down" style="position: absolute;right: 0;top: 17px;" aria-hidden="true"></i> 
</div> 
<div class="col-md-8"> 
    <div class="datepicker" id="sickPanelDatepicker"></div> 
</div> 
+3

你說的 「連接到第三日期選擇器」 是什麼意思?什麼樣的連接? – Vivek

+0

@Vivek所以當用戶選擇FROM日期,然後選擇TO日期,它應該顯示選擇範圍到第三個日曆,我顯示到div – andrew

+1

我看到引用4日期選擇器不是2 – charlietfl

沙发
0
1

此代碼應該做你想要做什麼。

$(function() { 
 

 
    $('#datepickerSickFrom').datepicker({ 
 
    dateFormat: 'dd/mm/yy', 
 
    onSelect: function(dateText, inst) { 
 
     $('#sickPanelDatepicker').datepicker('option', 'minDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); 
 
    } 
 
    }); 
 
    $('#datepickerSickTo').datepicker({ 
 
    dateFormat: 'dd/mm/yy', 
 
    onSelect: function(dateText, inst) { 
 
     $('#sickPanelDatepicker').datepicker('option', 'maxDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); 
 
    } 
 
    }); 
 
    $('#sickPanelDatepicker').datepicker({ 
 
    dateFormat: 'dd/mm/yy', 
 

 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<div class="group"> 
 
    <p class="inputIcon"><i class="fa fa-calendar" aria-hidden="true"></i></p> 
 
    <input type="text" class="setLabel datepicker" placeholder="11/30/2017" id="datepickerSickFrom"> 
 
    <i class="fa fa-caret-down" style="position: absolute;right: 0;top: 17px;" aria-hidden="true"></i> 
 
</div> 
 
<div class="group"> 
 
    <p class="inputIcon"><i class="fa fa-calendar" aria-hidden="true"></i></p> 
 
    <input type="text" class="setLabel datepicker" placeholder="11/30/2017" id="datepickerSickTo"> 
 
    <i class="fa fa-caret-down" style="position: absolute;right: 0;top: 17px;" aria-hidden="true"></i> 
 
</div> 
 
<div class="col-md-8"> 
 
    <br><br><br> 
 
    <div class="datepicker" id="sickPanelDatepicker"></div> 
 
</div>

+0

這應該也工作,如果我改變從** sickPanelDatepicker從**和日期** – andrew

0
votes
answers
9 views
+10

animate.css因動態內容失敗

0

所以我正在用jquery沿着動畫製作唱歌的過程。我設法制作了一個jQuery腳本,使字體顏色在我選擇的四種不同顏色之間交換,然後將這些新信息附加到div。animate.css因動態內容失敗

我想要做的下一件事是讓單詞/字母反彈到音樂並做到這一點我選擇animate.css,因爲它是輕量級且易於使用。我遇到的問題是,添加到我的動態創建的文本時似乎不起作用。文字顏色的作品,它似乎應用正確的類和屬性的字母/單詞,但它似乎從來沒有真正反彈。有任何想法嗎?

//fade out the sugar skull div 
$(function() { 
    $('.sugarskull').fadeIn('slow', function() { 
    $(this).delay(15000).fadeOut('slow'); 
    }); 
}); 

//js script to rotate colors on font 
$('.lyrics').each(function() { 
    var letters = $(this).text().split(''); 
    var colors = ["#e72f14", "#f59f00;", "#ea4591", "#2a94c7"]; 
    for (var i = 0; i < letters.length; i++) { 
    //animated bounce class is specific to the animate.css library and 
//should make the letters bounce but fails 
    letters[i] = "<span class = 'animated bounce' style='color:" + 
colors[(i % colors.length)] + ";'>" + letters[i] + "</span>"; 
    } 
    $(this).html(letters.join("")); 
}); 
沙发
0
0

你加入動畫反彈跨越。

所以跨度元素應該有下面的CSS工作動畫::

span {position: relative; display: block;} 
+0

給那一個鏡頭,但它實際上是由每個字母塊元素這絕對不是我想要的。我想知道這是否與我動態獲取內容有關。 –

+0

好於添加顯示:inline-block; – Sonia

+0

嘿索尼婭,所以我和我的朋友一直在做這方面的一些測試,我們似乎已經得出結論,css庫不能在dyanimcally創建的內容上運行。我們不確定爲什麼這是我自己硬編碼。我嘗試了一個內聯塊,但它似乎沒有幫助:( –

0
votes
answers
8 views
+10

我的響應式導航欄不顯示小屏幕上的鏈接

-1

我已經提供了一個jsfiddle到目前爲止我的代碼。我目前的問題是,當我按下菜單圖標(屏幕變小時出現),沒有任何反應。我想元素列表上點擊喜歡滑動,@這個網站:https://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/我的響應式導航欄不顯示小屏幕上的鏈接

這裏是我的鏈接的jsfiddle:

`HTML:

  <a href="#" class="header_icon" id="header_icon"></a> 
      <a href="Index.html" class="header_logo" style="height: 0px"> 
       <img src="images/brandlogoNAV.png" height="57.7px" width="190px"> 
      </a> 

       <nav class="menu" id="mymenu"> 
        <li><a class="active" href="Index.html">HOME</a></li> 
        <li><a href="#">ABOUT</a></li> 
        <li><a href="#">OUR APPROACH</a></li> 
        <li><a href="#">CONTACT</a></li> 
        <li><a href="javascript:void(0);" style="font-size:10px;" class="icon" onclick="myFunction()">&#9776;</a></li> 
       </nav> 

     </header> 

CSS:

.header { 
    position: fixed; 
    left: 0; 
    right: 0; 
    height: 58px; 
    background-color: #272727; 
} 


.menu { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #272727; 
    font-family: Century Gothic, sans-serif; 
    font-size: 11px; 
    float: left; 
    display: inline-block; 
} 


.menu li { 
    float: left; 
    border-right: 1px solid black; 
    display: inline; 
} 


.menu a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 22px 50px; 
    text-decoration: none; 
    border: 1px; 
    float: left; 
} 

.menu a:hover:not(.active) { 
    background-color: #111; 
} 

.menu a.active { 
    background-color: #52BA56; 
} 

.header_logo { 
    float: right; 
} 

.menu .icon { 
    display: none; 
} 

.icon { 
    background-color: #272727; 
} 


@media screen and (max-width: 850px) { 
    .menu li:not(:last-child) { 
     display: none; 
    } 

    .menu a.icon { 
     float: left; 
     display: block; 
    } 
} 

@media screen and (max-width: 850x) { 
    .menu.responsive {position: relative;} 
    .menu.responsive .icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    .menu.responsive li { 
    float: none; 
    display: block; 
    text-align: left; 
    } 

} 

jQuery的

function myFunction() { 
    var x = document.getElementById("mymenu"); 
    if (x.className === "menu") { 
     x.className += " responsive"; 
    } else { 
     x.className = "menu"; 
    } 
} 

'https://jsfiddle.net/timothykeyseraude/wx7te9Lq/4/

謝謝

沙发
0
0

首先:你應該擺脫<a href="javascript(void)">的。一般來說,當你需要一個可點擊的元素時,如果沒有href,這是使用button的絕佳機會。 :)它更好的可訪問性,你不必設置一個無用的href屬性。

現在你的問題:你的第二個媒體查詢有一個錯字。

@media screen and (max-width: 850x)` //(missing the p of "px"). 

你可以找到工作的例子,一個按鈕,而不是一個空的鏈接,在這裏:https://jsfiddle.net/pLx0jLws/

0
votes
answers
8 views
+10

執行雙AJAX調用

-1

我已經開始了我的第一個AJAX項目,並且我正在嘗試編寫雙AJAX函數,其中第一個函數的輸出字符串(「venue_ID」)被第二個AJAX函數用於輸出字符串(img_Url)。但我沒有取得任何成功。對於我的代碼下面的任何建議將不勝感激;執行雙AJAX調用

$(function(){ 
 
var api_url = 'https://api.foursquare.com/v2/venues/search?ll=4.89996,114.928457&client_id=DKVNHNM2I15Y0TF1RNAEF1FPQHJPCCUPHBMJKGFHXUQITWHC&client_secret=XLCPTHFDAVNTUUAOCMNDQLWAS4TXZOGAXV5A2L1AAK5QNJZS&v=20131016&query=bake+culture'; 
 
var $info = $('#info'); 
 

 
$.ajax({ 
 
    type: 'GET', 
 
    url: api_url, 
 
    data: {format: 'json'}, 
 
    dataType: 'json', 
 
    success: function (info) { 
 
     var response = info.response.venues[0]; 
 
     var venue_id = response.id; 
 
     console.log('success', info); 
 

 
     $info.append(venue_id); 
 
     var $pic = $('#pic'); 
 

 
     var baseUrl = 'https://api.foursquare.com/v2/venues/'; 
 
     var fsParam = '/?client_id=DKVNHNM2I15Y0TF1RNAEF1FPQHJPCCUPHBMJKGFHXUQITWHC&client_secret=XLCPTHFDAVNTUUAOCMNDQLWAS4TXZOGAXV5A2L1AAK5QNJZS&v=20131016'; 
 
     var picUrl = baseUrl + venue_id + fsParam; 
 

 
     $.ajax({ 
 
      type: 'GET', 
 
      url: picUrl, 
 
      data: {format: 'json'}, 
 
      dataType: 'json', 
 
      success: function (pic) { 
 
       var venue_data = pic.response.venue; 
 
       var img_url = venue_data.bestPhoto.prefix + '192x144' + venue_data.bestPhoto.suffix; 
 
       console.log('success', pic); 
 

 
       $pic.append(img_url); 
 
      } 
 
     }); 
 
    } 
 
}); 
 
});
<html lang='en'> 
 
    <head> 
 
    <title>AJAX Demo</title> 
 
    </head> 
 
    <body> 
 
    <div> 
 
     <h4>AJAX Demo</h4> 
 
     <div id="info"></div> <!-- To test 1st AJAX output --> 
 
     <div id="pic"></div> 
 
    </div> 
 
    <div><img src="pic"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="js/source.js"></script> 
 
</body> 
 
</html>

+0

'var venue_id'只在回調中定義,所以它不能在外面訪問。但即使你解決了這個問題,它仍然無法工作,因爲Ajax請求是異步的。 –

+0

[爲什麼我的變量在函數內部修改後沒有改變? - 異步代碼引用](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) –

+0

可能的重複[如何在.then()鏈中訪問先前的承諾結果?](https://stackoverflow.com/questions/28250680/how-do-i-access-previous-promise-results-in-a-then-鏈) –

沙发
0
0

您的代碼不適合,原因有二:

  1. 變量venue_id在Ajax回調函數的範圍定義,它是外部不確定函數
  2. Ajax調用異步執行,即執行$.ajax語句後的代碼被執行立即在Ajax調用返回場所ID之前。

有很多方法可以解決這個問題,並且有很多關於Stack Overflow的相關問題。你的情況,最簡單的解決將是移動第二Ajax調用第一個Ajax調用的回調函數,就像這樣:

$(function(){ 
    var api_url = 'https://api.foursquare.com/v2/venues/search?ll=4.89996,114.928457&client_id=DKVNHNM2I15Y0TF1RNAEF1FPQHJPCCUPHBMJKGFHXUQITWHC&client_secret=XLCPTHFDAVNTUUAOCMNDQLWAS4TXZOGAXV5A2L1AAK5QNJZS&v=20131016&query=bake+culture'; 
    var $info = $('#info'); 

    $.ajax({ 
     type: 'GET', 
     url: api_url, 
     data: {format: 'json'}, 
     dataType: 'json', 
     success: function (info) { 
      var response = info.response.venues[0]; 
      var venue_id = response.id; 
      console.log('success', info); 

      $info.append(venue_id); 
      var $pic = $('#pic'); 

      var baseUrl = 'https://api.foursquare.com/v2/venues/'; 
      var fsParam = '/?client_id=DKVNHNM2I15Y0TF1RNAEF1FPQHJPCCUPHBMJKGFHXUQITWHC&client_secret=XLCPTHFDAVNTUUAOCMNDQLWAS4TXZOGAXV5A2L1AAK5QNJZS&v=20131016'; 
      var picUrl = baseUrl + venue_id + fsParam; 

      $.ajax({ 
       type: 'GET', 
       url: picUrl, 
       data: {format: 'json'}, 
       dataType: 'json', 
       success: function (pic) { 
        var venue_data = pic.response.venue; 
        var img_url = venue_data.bestPhoto.prefix + '192x144' + venue_data.bestPhoto.suffix; 
        console.log('success', pic); 

        $pic.append(img_url); 
       } 
      }); 
     } 
    }); 
}); 
+0

謝謝!你的建議對我有用 –

板凳
0
0
  1. 有幾種方法來解決異步問題。

a/JS中的本地方式是嵌套回調函數調用。參考XMLHttpRequest()對象作爲參考,以及它們的onreadystatechange屬性。

一旦您更好地理解了JS中的本地API調用,您可以使用jQuery提供的快捷方式,承諾或async/wait。所有這些在Stack Overflow和其他網站都有詳細記錄。

b如果您決定使用jQuery,則需要在第一個AJAX調用中接下來的第二個AJAX調用,即在第一個AJAX調用成功後的指令中。這個結構被稱爲「嵌套」。

c最後,您可以使用async/wait提供的工具。

  1. 您的變量venue_id應該定義爲任何函數之外的全局變量,以便它可以在另一個函數中使用。 但是如果你使用嵌套回調,你應該沒有問題,並且不需要全局變量。
+0

謝謝特里斯坦。我已經谷歌搜索項目1和2。感謝@Patrick Hund,感謝嵌套函數。仍然試圖圍繞XMLHttpRequest()包裝我的頭。也許我仍然在嘗試熟悉JS術語。 幸運的是,我發現使用「var $ pic = $('#pic');」作爲HTML使用的全球聲明。但圖像輸出通過「

」變爲空白。是否因爲它不是格式不正確的格式? –

0
votes
answers
8 views
+10

OpenCart返回數組到JSON並傳遞給jQuery

0

我有問題要在jQuery中返回一個數組。我用函數來響應來自mysql的數據,我不得不添加它做數組並返回查看。這就像幻燈片一樣,每5秒鐘顯示一次不同的評論。OpenCart返回數組到JSON並傳遞給jQuery

這是我的代碼: 控制器:

$this->load->model('catalog/review'); 
    $current_store = $this->config->get('config_store_id'); 


    $feedbacks = $this->model_catalog_review->getFeedbacksByStore($current_store); 


     $this->data['feedbackscrazys'][] = array(
      'feedback_name' => $feedbacks['form_name'], 
      'feedback_text' => $feedbacks['feedback'], 
     ); 

型號:

public function getFeedbacksByStore($id) { 
    $sql = "SELECT * FROM " . DB_PREFIX . "feedbackcrazy"; 
    $sql .= " WHERE shop_id = ".$id." AND show_index=1"; 
    $sql .= " ORDER BY RAND() LIMIT 10"; 
    $query = $this->db->query($sql); 

    if($query->num_rows > 0) { 
     return $query->row; 
    } else { 
     return 0; 
    } 


} 

和視圖:

var feedbacks = function() { 
// here i want to replace this code with the results of array 
var jsontext ='[{"feedback_author":"Vesela Chobanova","feedback_text" : "Thanks for the quick delivery and the beautiful clothes! :):)"},{"feedback_author": "Dimitar Nedelchev","feedback_text" : "You are great! You are one of the few to give sincere and unexpected rewards! Thank you very much!"},{"feedback_author": "Bojidara Karajorova","feedback_text" : "Thank you for your service responsiveness :)"},{"feedback_author": "Maria Rizova","feedback_text" : "Thank you very much for the Childrens Gold Contrast Gown. She is very beautiful !! thank you very much ."},{"feedback_author": "Violeta Stefanova","feedback_text" : "Hello, I ordered several times from Crazy kids. I am very pleased with both the quality of clothes and the service. When I need advice, I always get full co-operation. Thanks!"},{"feedback_author": "Maria Hristova","feedback_text" : "Excellent quality! Very good attitude and full cooperation. thanks "},{"feedback_author": "Stefka Mihova","feedback_text" : "Thanks to the quick delivery and the amazing Polish hats. I expect a further load from them"},{"feedback_author": "Daniela Kosova","feedback_text" : "The delivery was super fast. Thanks. We are very pleased with the clothes we received"},{"feedback_author": "Silvia Purvanova","feedback_text" : "The dress I received was amazing. Thanks for the quick delivery and the wonderful attitude on the phone"}]'; 
var json = JSON.parse(jsontext); 
var i = 0; 
var fnchange = function() { 
    $('#footerfeedbackItemContent').animate({'opacity': 0}, 2000, function() { 
     $(this).text(json[i]['feedback_text']); 
    }).animate({'opacity': 1}, 2500); 

    $('#footerfeedbackItemCustomer').animate({'opacity': 0}, 2000, function() { 
     $(this).text(json[i]['feedback_author']); 
    }).animate({'opacity': 1}, 2500); 

    if(++i < json.length){ 
     setTimeout(fnchange, 10000); 
    } else { 
     i = 0; 
     setTimeout(fnchange, 10000); 
    } 
}; 
setTimeout(fnchange, 1); 


}; 
setTimeout(feedbacks,1); 
沙发
0
0

我不知道你的Opencart的購物車版本,但嘗試out this

public function myData(){ 
    $this->load->model('catalog/review'); 
    $current_store = $this->config->get('config_store_id'); 
    $feedbacks = $this->model_catalog_review->getFeedbacksByStore($current_store); 

     $this->data['feedbackscrazys'][] = array(
      'feedback_name' => $feedbacks['form_name'], 
      'feedback_text' => $feedbacks['feedback'], 
     ); 
     //add this line 
    json_encode($this->data); 

    //if opencart 2.3.x+ 
    //$this->response->addHeader('Content-Type: application/json'); 
    //$this->response->setOutput(json_encode($data)) 
    } 

這是Opencart的2.3.x版本越來越典型的JSON數據+

public function about() 
    { 
     $data['name'] = $this->config->get('config_name'); 
     $data['version'] = "OpenCart ".VERSION; 
     //$data['name'] = $this->config->get('config_name'); 
     $data['config_address'] = $this->config->get('config_address'); 
     $data['config_telephone'] = $this->config->get('config_telephone'); 
     $data['config_address'] = $this->config->get('config_address'); 
     $data['config_currency'] = $this->config->get('config_currency'); 
     //the last two lines will return json data 
     $this->response->addHeader('Content-Type: application/json'); 
     $this->response->setOutput(json_encode($data)); 
    } 
+0

是的,這可能是正確的方式的一個例子,但是我的版本是1.5.6.4 .... –

+0

如果有是一種停止對此查詢進行緩存的方法...或以其他方式執行...... –

0
votes
answers
8 views
+10

如何用JS手動彈出所需的textfield警報?

0

有誰知道如何使用JS觸發這個彈出窗口?如何用JS手動彈出所需的textfield警報?

Example

我知道默認情況下它通過點擊提交按鈕類型時,文本字段內區域觸發。

當我點擊提交按鈕而沒有填寫需要的文本字段時,我有我自己的Boostrap模式警報彈出窗口。所以一旦模態警報被解散,我想要那個默認的JS警報觸發器。

沙发
0
2

你問的是HTML5約束驗證。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation

爲了您的具體的例子,你可以使用required屬性。

0
votes
answers
8 views
+10

選擇一個孩子的子女

1

爲什麼我不能在jQuery中選擇一個孩子的孩子?我想使用.children()方法和>選擇器向課程的孩子添加課程。請參見下面的代碼:選擇一個孩子的子女

$(function(){ 
     // main expansion element 
     $(".expander").click(function() { 
      var subShown = $(this).children("ul > li").hasClass("show"); 
      if (!subShown) { 
       $(this).children(".indented").slideDown('100').addClass("show"); 
       $(this).children(".caret").addClass("reversedCaret"); 
      } else { 
       $(this).children(".indented").slideUp('100').removeClass("show"); 
       $(this).children(".caret").removeClass("reversedCaret"); 
      } 
     }); 
    }); 

HTML:

<div class="expander"> 
        <span class="caret downCaret right visibleCaret">+</span> 
        <ul> 
        <li class="category">Item 1<a href="http://www.google.com"></a></li> 
        <li class="indented"><a href="http://www.google.com">Item 2</a></li> 
        <li class="indented"><a href="http://www.google.com">Item 3</a></li> 
        </ul> 
       </div> 

當我點擊expander它不會將該類添加到我的li元素。爲什麼?

+2

的'li'是在膨脹,這就是'兒童不直接孩子() '回報。你需要使用'find()'而不是'children()'。 'children()'和find('> *')基本相同' – Taplar

+0

我試過'.find()'但我無法正常工作。會在'.children()'之前還是之後? – kawnah

+2

看看斯科特的解決方案。你根本不用 - 要 - 完全使用孩子()。 – Taplar

沙发
0
2

JQuery documentation.children()

的。兒童()方法從.find()在不同。兒童()只 行進的單一電平向下DOM樹而.find( )可以遍歷 多層次選擇後代元素(孫, 等)以及。

你真的甚至不需要使用.children()這一點。簡單得多的解決方案是通過在選擇器之後向JQuery傳遞第二個參數,僅使用provide context for your queries

$(function(){ 
 
     // main expansion element 
 
     $(".expander").click(function() { 
 
     
 
      // Just for demonstration: ************************************************* 
 
      
 
      // 2 because of <span> and <ul> 
 
      console.log($(this).children().length);   
 
      
 
      // 0 because anything beyond children isn't returned in the first place 
 
      console.log($(this).children("ul > li").length); 
 
      // ************************************************************************* 
 
     
 
      // By passing "this" as the second argument to JQuery, after the selector, 
 
      // it sets the context for the search to only "this", so the entire DOM 
 
      // is not searched, just the object that "this" is bound to. 
 
      var subShown = $("ul > li", this).hasClass("show"); 
 
      if (!subShown) { 
 
       $(".indented", this).slideDown('100').addClass("show"); 
 
       $(".caret", this).addClass("reversedCaret"); 
 
      } else { 
 
       $(".indented", this).slideUp('100').removeClass("show"); 
 
       $(".caret", this).removeClass("reversedCaret"); 
 
      } 
 
     }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="expander"> 
 
    <span class="caret downCaret right visibleCaret">+</span> 
 
    <ul> 
 
    <li class="category">Item 1<a href="http://www.google.com"></a></li> 
 
    <li class="indented"><a href="http://www.google.com">Item 2</a></li> 
 
    <li class="indented"><a href="http://www.google.com">Item 3</a></li> 
 
    </ul> 
 
</div>

+0

謝謝你 - 但我仍然很難理解爲什麼我的版本不起作用?所以如果'.children()'在dom樹中下了一層,我的li就是div的兩層。所以考慮到這一點,不應該使用'.children()'和'>'選擇器給我什麼我想要的? – kawnah

+0

@kawnah'.children()'方法返回一組包**僅**子元素。因此,即使你的選擇器說要從那裏搜索更深,搜索將發生的元素集也就沒有任何元素在較低的深度。 –

+1

@kawnah我已經更新了答案,以包含一些示例,這些示例顯示調用'.children()'只會返回直接子節點,除此之外沒有其他任何內容。所以試圖深入搜索沒有任何回報。 –

板凳
0
0

如果您仍想接近它,你的(而不是給出答案呢,這是更好的方式),然後改變這個

$(this).children("ul > li") 

對此:

$(this).children('ul').children() 

選擇的孩子就是這樣。

+0

好的..我正在與斯科特馬庫斯的回答,但謝謝你 – kawnah

地板
0
0

可以使用.find('>ul>li'),例如:

var expander = $(".expander") 

expander.on('click', function(){ 
    var li = expender.find('>ul>li') 
    li.hasClass("show") 
}) 
4楼
0
0

.querySelector

document.querySelector("section > div").classList.add("my-gray");
.my-gray{ 
 
    background: gray; 
 
}
<section> 
 
Foo 
 
<div> 
 
Bar 
 
</div> 
 
</section>

0
votes
answers
7 views
+10

如何查看/滾動某個div時觸發某個動作?

0

我有一些div,我需要觸發一個動作(浮動另一個div或例如發出警報)當某個div被查看或滾動到..什麼是最好的方法來做到這一點?如何查看/滾動某個div時觸發某個動作?

+1

請參閱http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport – akdh 2013-03-23 20:27:46

沙发
0
0

你的意思是「看」我不知道是什麼 - 但這裏是當用戶把他們的鼠標在div,你會怎麼做:

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

$(window).scroll(function() { 
    if(isScrolledIntoView(myelement)) { 
     // in view 
    } else { 
     // not in view 
    } 
}); 

感謝Is there a way to detect when an HTML element is hidden from view?

+0

通過查看我的意思是滾動到/來進入視圖..不幸的是,我試過這個,但它沒有奏效! – hamama 2013-03-23 20:25:01

+0

@ user2203146我已經更新了我的答案,應該會幫助你。 – 2013-03-23 20:59:18

+0

它現在正常工作,非常感謝 – hamama 2013-03-24 02:57:42

板凳
0
0

你可以可能使用Bullseye jQuery plugin,它增加了enterviewportleaveviewport事件元素。

0
votes
answers
7 views
+10

需要正確的內聯jQuery語法才能更改fancybox的維度

0

我正在使用fancybox在頁面上成功顯示iframes。我需要能夠針對不同用途更改fancyboxiframe的尺寸。我的理解是,聯機jQuery可能是修改CSS的最佳選項,但我無法使其發揮任何作用。需要正確的內聯jQuery語法才能更改fancybox的維度

如果我在CSS文件中更改這些CSS尺寸值並重新發布它,它工作得很好 - 但它適用於頁面上的所有fancyboxes。這些維度是我需要在線更改fancyboxes的不同實例的維度。

我試過這個網站可修改fancybox CSS enter code here維度,此fancybox前右加內嵌jQuery,但無論我得到了jQuery語法錯誤,否則我將它放錯了地方。以下是我嘗試使用基於在線建議的html的衆多jQuery調用中的一個示例之一:

請幫助完成任何更正/建議!

編輯:文件中的CSS正在工作。在內聯jQuery調用中使用".fancybox-slide--iframe .fancybox-content"可以嗎?

編輯2:它可能是一個時間問題?標記可以在jQuery改變CSS之前運行嗎?

$(".fancybox-slide--iframe .fancybox-content").css("width", "1200px");
.fancybox-slide--iframe .fancybox-content { 
 
    width : auto; 
 
    height : auto; 
 
    min-width: 600px; 
 
    min-height: 500px; 
 
    max-width : 100%; 
 
    max-height : 100%; 
 
    margin: 0; 
 
    box-shadow: 0 0 16px #999; 
 
    border: 3px solid red; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="add-track-container"> 
 

 
    <a class="text add-track-container2" data-fancybox data-src="../../test/ytsearch/index.html" href="javascript:;"> 
 

 
     <img class="add-track-icon" src="common/images/desktop_icons/addcircle50.png" alt="Add Track" /> 
 

 
    </a> 
 
</div>

+1

**語法錯誤:**'.css(「width」:「1200px」)'=>'.css(「width」,「1200px」)'/ *固定在edit上。* /也不需要使用'px' 'px'默認情況下 – Pedram

+0

我先試過這個語法,它不起作用。顯示的語法來自W3,用於多個參數......我也在嘗試,但忘記改回。我嘗試了和沒有px只是爲了確保。 – Mcbeese

沙发
0
0

想通了。我沒有正確地附加到fancybox。一旦我修好了,一切都很好。下面是如何以不同的fancybox設置應用於多個div /類爲尋找一個簡單的例子,旁邊的人的例子......把這個在你的頁面的底部,右側前:

  <script> 
       $('[data-fancybox]').fancybox({ 
        toolbar : false, 
        smallBtn : true, 
        afterClose: function() { 
        parent.location.reload(true); 
       } 
       }) 

       $(".log-reg").fancybox({ 
        toolbar : false, 
        smallBtn : true, 
        iframe : { 
         css : { 
          height : '500px' 
         } 
        } 
       }); 
      </script> 
0
votes
answers
7 views
+10

爲什麼我的禁用/啓用複選框在JQuery中不起作用?

0

我不明白爲什麼這段代碼不起作用。請嘗試在你的口水中具體,因爲它一定是非常愚蠢的東西。爲什麼我的禁用/啓用複選框在JQuery中不起作用?

$("#cagree").on("change", function(e){ 
 
	 	 if($("#chbx").attr("checked")){ 
 
	 	  $("#submitbtn").button("enable"); 
 
	 	 } else { 
 
	 	  $("#submitbtn").button("disable"); 
 
	 	 } 
 
	 	 
 
	 	 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
	 <title>My Page</title> 
 
	 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
</head> 
 
<body> 
 
<div data-role="page"> 
 

 
	 <div data-role="content"> 	 
 
	 	 <label><input type="checkbox" name="checkbox-0" id="chbx" class="cagree"> I agree </input></label> 
 
     <input type="button" value="Submit" id="submitbtn" class="submit" disabled/> 
 
	 </div><!-- /content --> 
 

 
</div><!-- /page --> 
 

 
</body> 
 
</html>

+2

可能重複[設置「選中」與jQuery複選框?](https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) –

+0

什麼是$( 「#submitbtn」)。button(「enable」)'應該這樣做?也沒有像''這樣的標籤 – j08691

沙发
0
1

1. $("#cagree")必須$(".cagree")

2.使用.is(":checked")檢查複選框被選中或不

$("#submitbtn").button("enable") 3.Instead做$("#submitbtn").prop('disabled', false);和副通用

工作片段: -

$(".cagree").on("change", function(e){ // it's class so use . 
 
    if($(this).is(":checked")){ // use $(this) for current-object 
 
    $("#submitbtn").prop('disabled', false); // it's property so use .prop 
 
    }else{ 
 
    $("#submitbtn").prop('disabled', true); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>My Page</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    </head> 
 
    <body> 
 
    <div data-role="page"> 
 

 
     <div data-role="content"> 	 
 
     <label><input type="checkbox" name="checkbox-0" id="chbx" class="cagree"> I agree </label> 
 
     <input type="button" value="Submit" id="submitbtn" class="submit" disabled/> 
 
     </div><!-- /content --> 
 

 
    </div><!-- /page --> 
 

 
    </body> 
 
</html>

注: -

enabledisable的屬性,以便使用.prop()對其進行設置。

</input>是無效的,所以刪除。