WebStorm: не удается поймать <input /> с помощью jQuery - PullRequest
Новая
       7

WebStorm: не удается поймать <input /> с помощью jQuery

0 голосов
/ 16 ноября 2018

Я создаю сайт с React.js со слайдером, который использует jQuery для автоматической прокрутки.Я сделал это в песочнице (Codepen.io), она работает хорошо.После того, как я начал делать это с "create-реагировать-приложение" и WebStorm.Что я сделал: В командной строке я написал: 

"npm install create-react-app"
"npm install jquery"
"create-react-app my-app"

После этого я открыл «my-app» с помощью WebStorm 2018.2 (x86) и перенес в него весь свой код из песочницы, добавив немного »команда импортаТаким образом, слайдер сейчас не работает (он работает так, как будто отсутствует код JavaScript).Я удалил дополнительный код.Вот что осталось: Код JS 

import React from 'react';
import $ from 'jquery'

/*jshint esversion: 6 */
class App extends React.Component {
    render() {
        return <div><div className = "slider"><input type = "radio" name = "slides" id = "slide1" /><input type = "radio" name = "slides" id = "slide2" /><input type = "radio" name = "slides" id = "slide3" /><input type = "radio" name = "slides" id = "slide4" /><input type = "radio" name = "slides" id = "slide5" />
            <input type = "radio" name = "slides" id = "slide6" /><div className = "captions"><div className = "c2" > Prediction 2 </div><div className = "c3"> Prediction 3 </div> <div className = "c4" > Prediction 4 </div> <div className = "c5" > Prediction 5 </div> 
            <div className = "c6" > Prediction 6 < /div></div></div> <div className = "controls" ><label htmlFor = "slide1" /><label htmlFor = "slide2" /><label htmlFor = "slide3" /><label htmlFor = "slide4" /><label htmlFor = "slide5" /><label htmlFor = "slide6" /></div></div>;
    }
}

ReactDOM.render( <App/> , document.getElementById('root'));

//script for slider's autoscrolling

let inputs = $('input[type=radio]');
console.log(inputs);
let next;
let intervals = setInterval(() => {
    next = inputs.filter(":checked").next('input');
    if (!next.length) next = inputs.first();
    next.prop('checked', true);
}, 2000);

inputs.change(() => {
    clearInterval(intervals);
    intervals = setInterval(function() {
        next = inputs.filter(":checked").next('input');
        if (next.length) next.prop('checked', true);
        else inputs.first().prop('checked', true);
    }, 2000);
});

HTML 

<!DOCTYPE html>
<html lang="en">
  <head>
      <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
      <meta charset="utf-8">
      <title>React App</title>
  </head>

  <body>
      <div id="root"></div>
  </body>
</html>

В консоли я вижу: jQuery.fn.init(0).Что я должен сделать, чтобы поймать входы?

1 Ответ

0 голосов
/ 16 ноября 2018

Спасибо, @connexo, за ответ: 

$(document).ready(()=>{
        let inputs = $('input[type=radio]');
        console.log(inputs);
        let next;
        let intervals = setInterval(() => {
            next = inputs.filter(":checked").next('input');
            if (!next.length) next = inputs.first();
            next.prop('checked', true);
        }, 2000);

        inputs.change(() => {
            clearInterval(intervals);
            intervals = setInterval(function() {
                next = inputs.filter(":checked").next('input');
                if (next.length) next.prop('checked', true);
                else inputs.first().prop('checked', true);
            }, 2000);
        });
    })

Теперь работает! Стало понятно, что без этого заявления я пытался получить доступ к входным тегам, пока они не были загружены.

...