jquery - 使用 JQuery 的文本选择器/分析器

Question

尝试为团队创建文本分析器，以便他们可以在我们发送电子邮件之前检查我们的电子邮件。这个想法是让所有团队参与选择发送给客户的最佳电子邮件:

我在 HTML 中使用了以下代码:

  <p class="sentence" href="#">Lorem ipsum dolor,  adipisicing elit.</p>
  <div class="popup-inner" data-popup="popup-1" hidden="hidden">
       <input type="radio" name="gender" value="like" checked> Like<br>
       <input type="radio" name="gender" value="dislike"> Dislike<br>
       <input type="radio" name="gender" value="other"> Other
       <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
  </div>

并使用以下代码运行它:

var sentence = $('.sentence').html().split(/\s+/),
    result = [];

for( var i = 0; i < sentence.length; i++ ) {
    result[i] = '<span class="keyword-btn" data-popup="' + i + '">' + sentence[i] + '</span>';
}

$('.sentence').html(result.join(' '));

$('.sentence').on('click', 'span', function(){
    $(this).addClass('highlight');
});

function showPopup(span, $popup) {
  var offset = span.offset();
  $popup
    .fadeIn(350)
    .css({
      left: Math.min(offset.left, $(window).innerWidth()-$('.questions').outerWidth()) + 25,
      top: offset.top + 50
    });
}

$(function() {
    //----- OPEN
    $('span.keyword-btn').on('click', function(e)  {
        //var targeted_popup_class = jQuery(this).attr('data-popup-open');
        //$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
         showPopup($(this), $('div.popup-inner'));
        e.preventDefault();
    });

    //----- CLOSE
    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

        e.preventDefault();
    });
});

这是我的 CSS 代码:

.sentence span:hover, .highlight{
    color: rgb(58, 207, 222);
    cursor: pointer;
}
/* Close Button */
.popup-close {
    width:30px;
    height:30px;
    padding-top:4px;
    display:inline-block;
    position:absolute;
    top:0px;
    right:5px;
    transition:ease 0.25s all;
    -webkit-transform:translate(50%, -50%);
    transform:translate(50%, -50%);
    border-radius:1000px;
    background:rgba(0,0,0,0.8);
    font-family:Arial, Sans-Serif;
    font-size:20px;
    text-align:center;
    line-height:100%;
    color:#fff;
}

.popup-close:hover {
    -webkit-transform:translate(50%, -50%) rotate(180deg);
    transform:translate(50%, -50%) rotate(180deg);
    background:rgba(0,0,0,1);
    text-decoration:none;
}

我需要让单选按钮出现在每个选定单词的正下方，但直到现在都失败了。请提供一点帮助会很好

Answer 1

我认为你缺少的是 .popup-inner 的位置

.popup-inner {
    width:100px;
    height:50px;
    padding:10px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    box-shadow:0px 2px 6px rgba(0,0,0,1);
    border-radius:3px;
    background:#c1cecb;
}

这应该让您的按钮框位于每个选定的单词下方。