У меня проблемы с настройкой изображения с помощью JavaScript - PullRequest
Новая
       10

У меня проблемы с настройкой изображения с помощью JavaScript

1 голос
/ 01 апреля 2011

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

function setStar(intStarId) {
var stars = new Array("star_one","star_two","star_three","star_four","star_five");
for (var i = 0; i < intStarId; i++)
    document.getElementById(stars[i]).src = "images/star.png";
}

Когда я вызываю этот метод, он ничего не делает со звездой.Как я мог заставить это работать так, чтобы это заменяло пустое изображение звезды на изображение звезды?

Вот как я называю это в html.(на самом деле это php, но он повторяет html) 

echo "<script language='javascript'>setStar(3)</script>";

А вот HTML-код для звезд (php повторяет html) 

echo "<ul name='a' style='list-style: none; margin: 0px; float: right;'>
                <li name='b' align='center'>
                    <form name = 'test' action='#' method='post'>
                        <a href='#'><img name='star_one' src='images/star_blank.png' onmouseover='hoverInStar(1)' onmouseout='hoverOutStar(1)'/></a>
                        <a href='#'><img name='star_two' src='images/star_blank.png' onmouseover='hoverInStar(2)' onmouseout='hoverOutStar(2)'/></a>
                        <a href='#'><img name='star_three' src='images/star_blank.png' onmouseover='hoverInStar(3)' onmouseout='hoverOutStar(3)'/></a>
                        <a href='#'><img name='star_four' src='images/star_blank.png' onmouseover='hoverInStar(4)' onmouseout='hoverOutStar(4)'/></a>
                        <a href='#'><img name='star_five' src='images/star_blank.png' onmouseover='hoverInStar(5)' onmouseout='hoverOutStar(5)'/></a>
                    </form>
                </li>
            </ul>";

Ответы [ 3 ]

2 голосов
/ 01 апреля 2011

Вы пытаетесь найти элемент в DOM, используя идентификатор.Но ваш вывод HTML содержит только имя.Попробуйте изменить свой код ниже 

echo "<ul name='a' style='list-style: none; margin: 0px; float: right;'>
                <li name='b' align='center'>
                    <form name = 'test' action='#' method='post'>
                        <a href='#'><img id='star_one' src='images/star_blank.png' onmouseover='hoverInStar(1)' onmouseout='hoverOutStar(1)'/></a>
                        <a href='#'><img id='star_two' src='images/star_blank.png' onmouseover='hoverInStar(2)' onmouseout='hoverOutStar(2)'/></a>
                        <a href='#'><img id='star_three' src='images/star_blank.png' onmouseover='hoverInStar(3)' onmouseout='hoverOutStar(3)'/></a>
                        <a href='#'><img id='star_four' src='images/star_blank.png' onmouseover='hoverInStar(4)' onmouseout='hoverOutStar(4)'/></a>
                        <a href='#'><img id='star_five' src='images/star_blank.png' onmouseover='hoverInStar(5)' onmouseout='hoverOutStar(5)'/></a>
                    </form>
                </li>
            </ul>";

Также обратите внимание, идентификатор должен быть уникальным для всех элементов в DOM.

1 голос
/ 01 апреля 2011

Вы должны просто использовать jQuery со следующей библиотекой, это было бы проще:)

Посмотрите на http://www.jquery.com/ и http://plugins.learningjquery.com/half-star-rating/

1 голос
/ 01 апреля 2011

Я думаю, вы должны использовать getElement * sByName * вместо getElement * ById * ;-) Обратите внимание, потому что getElementsByName возвращает не элемент, а список узлов: 

function setStar(intStarId) {
    var stars = new Array("star_one","star_two","star_three","star_four","star_five");
    for (var i = 0; i < intStarId; i++) {
        document.getElementsByName(stars[i])[0].src = "images/star.png";

    }
}
...