Jquery: отобразить img рядом со строкой, на которую нажали - PullRequest
Новая
       13

Jquery: отобразить img рядом со строкой, на которую нажали

3 голосов
/ 23 января 2011

Я пытаюсь создать функцию закладок для своего сайта, поэтому, когда кто-то нажимает на кнопку «установить закладку», а затем нажимает на строку текста, он размещает изображение закладки слева от этой строки.(Затем я сохраню coor в cookie, но я могу сделать это без посторонней помощи)

Один из способов, которым я думал об этом, был, когда человек нажал на строку текста в абзаце, попросил егокоординату Y места, на котором щелкнул человек, затем округлите это число до ближайшего числа, кратного 20. Высота строки каждого абзаца составляет 20 пикселей, поэтому если вы округлите координаты Y вниз, то вы получите верхнюю позицию дляту единственную строку внутри абзаца, по которому они щелкнули.

Так что я думаю, что это будет выглядеть так: когда кто-то нажимает на строку текста в абзаце, он получает индекс этого абзаца, поэтому, если это 4-ая P вниз по странице, индекс будет3, затем он получит координаты Y того места, где щелкнул пользователь, затем округлит это число до ближайшего числа, кратного 20, а затем поместит изображение слева от этого абзаца, где верхняя позиция изображения будет округленной координатой Y.

Может кто-нибудь помочь мне с этим?Я немного растерялся, как вы можете видеть: 

$('p').click(function(e) {
    var myIndex = $(this).index()
    var myIndexTop = myIndex.top()
    var myIndexLeft = myIndex.left()

    var offset = $(this).offset();
    var y = e.pageY - this.offsetTop;

    $('.bookMarkImg')
        .left(myIndexLeft)
        .top('round down to nearest num thats divisible by 20)
OR?     
    $('.bookMarkImg')
        .css({'left': myIndexLeft, 'top' 'round down to nearest num thats divisible by 20'})
})

1 Ответ

3 голосов
/ 23 января 2011

округлить до ближайшего 20: 

y = Math.floor(y / 20) * 20;

Кроме того, .top() и .left() не существует: вам нужно:

  • $(this).offset().top и $(this).offset().left для получения позиций
  • .css({left: ..., top: ...}) для их установки

Другое дело, что если вы хотите, чтобы только одно из этих изображений закладок плавало вокруг, в зависимости от того, где вы нажимаете, то вам, вероятно, нужно поставить <img> на уровне <body> (в конце) и позиционируется абсолютно, поэтому он может свободно перемещаться по всему документу. Тогда не надо вычитать смещение абзаца из координаты y.

Пример кода : 

$('p').click(function (e) {
    var offset = $(this).offset();
    var top = Math.floor(e.pageY / 20) * 20;

    $('.bookMarkImg').css({
        left: offset.left,
        top: top
    }).show();
});

См. Рабочую демонстрацию : http://jsfiddle.net/upgBa/

Примечание : вам, возможно, придется учитывать любые отступы / поля / границы, которые у вас есть в абзацах и в теле , что может отбросить вычисления (просто вычтите их части).

...