Принимая пользовательский ввод и оповещение изображения - PullRequest
Новая
       5

Принимая пользовательский ввод и оповещение изображения

0 голосов
/ 14 октября 2018

Я пытаюсь выяснить, сколько изображений на странице, используя DOM, и сохранить его в переменной.Как только я нахожу, что хочу напечатать «На странице есть ПЕРЕМЕННЫЕ (берет, сколько бы ни было число из переменной)».Далее, будет текстовое поле, в котором пользователь может ввести число, подобное 1, и первое изображение появится на другой странице (предупреждение), когда они нажмут кнопку «Перейти».Я не уверен, что мой код делает неправильно, но я запутался.Я знаю, что мне нужно добавить кнопку и текстовое поле с помощью jQuery.

Что у меня есть 

$(document).ready(function() {
var image = $(.img).length;
  $(".numImg").click(function() {
    alert("");
  });
});

Полный код: 

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script>
    $(document).ready(function() {
      $('img').attr('height','50px').attr('width','50px'); //make all images 50x50 pixels

    }); //end ready()

   $(document).ready(function() {
    var image = $(".img").length;
      $(".numImg").click(function() {
        alert("");
      });
    });

    </script>
    </head>

    <body>
    <div id="main_content">

    <div id="image_selection">
    <input type="text" value="Enter a number" id="imgNumber" > 
    <button class="numImg">Alert Image Selected</button>
    </div>
    <hr>

    <div id="images">
    <h3>Some Images</h3>
        <p><img src="firetruck.jpg" alt="pic of truck" >  |
        <img src="baseball.jpg" alt="pic of baseball" >  |
        <img src="soccer_ball.jpg" alt="pic of soccer ball" >
        </p>

    </div><!-- end of 'images' div -->
    <hr>

    </div><!-- end 'main_content' div -->
    </body>
    </html>

Ответы [ 3 ]

0 голосов
/ 14 октября 2018

Просто небольшое исправление для ответа Рэнди.Если вы хотите выбрать элемент img внутри div.images, вы можете сделать что-то вроде: 

var imgCount = $("div#images p img").length;

Затем используйте imgCount внутри вашего оповещения: 

alert("There are " + imgCount + " images on the page");
0 голосов
/ 15 октября 2018

Вот недостающий кусок.Чтобы вставить новый контент на страницу, вы можете сделать это: 

var image = $("img").length;
// Create a new <p> element and add the text to it.
var text = $('p').text("There are " + image + " images.");
// Insert as the first child of the #image_selection div
$('#image_selection').prepend(text);

Справочник по функциям манипуляции с jQuery DOM .

Если вы хотите показать изображение в том же самомвместо того, чтобы использовать window.open, как предложено @RandyCasburn, вы можете заглянуть в «модальные окна», но для этого потребуется определенная работа.

0 голосов
/ 14 октября 2018

Во-первых, вы пропустили предложение:

Изменение:

var image = $(.img).length;

Кому:

var image = $(".img").length;

Далее:

Я пытаюсь выяснить, сколько изображений на странице, используя DOM, и сохранить его в переменной.

Вы сделали это: image переменная

Как только я обнаружу, что хочу распечатать "На странице есть ПЕРЕМЕННЫЕ изображения".

Сначала вам нужно будет поместить этот текст в HTML-код, а затем мы обратимся к остальным

. Далее будет текстовое поле, в которомпользователь может ввести число, подобное 1, и первое изображение появится на другой странице (предупреждение), когда они нажмут кнопку «Перейти».

Ну, вы не можете поместить изображение в предупреждение.

Возьмите изображения и обратитесь к используемому указателю:

var images = $('img'); var requestedImageNumber = $('#imgNumber').val(); var requestedImage = images[requestedImageNumber -1]; window.open(requestedImage.src);

Это поможет вам начать.Есть много дел.Пожалуйста, оцените тот факт, что я говорю об этом просто, чтобы вы могли прогрессировать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...