Question

我想知道如何从焦点模糊事件中触发的元素（使用点击事件）获取值。我创建了像jQuery datepicker一样的图标选择器。这里是代码，但是当我点击图标时，日期选择器元素隐藏而不给出值。

PHP代码

  <html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
  </head>
  <body>
    <h1>thanks for creating a tasklist, <%= @user.name %>!</h1>
    <p>You are about to get stuff done!</p>
  </body>
</html>

的Javascript

<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/>
<div id="iconPicker" class="iconpicker dropdown-menu">
    <div class="iconpicker-wrapper">
        <table class="dt-icons">
        <?php
        foreach (array_chunk($icons, 5, true) as $icon_cunk) {
            echo '<tr>';
            foreach($icon_cunk as $key => $ico) {
                echo '<td data-value="'. $key .'"><i class="' . $key .'"></i></td>';
            }
            echo '</tr>';
        }
        ?>
        </table>
    </div>
</div>

更新

$("#contentIcon").keypress(function (e) { e.preventDefault(); }); $(document).on('click', '#iconPicker table.dt-icons td', function () { $('#contentIcon').empty(); var _dtself = $(this); document.getElementById("contentIcon").value = _dtself.data('value'); }); $('#contentIcon').focus(function() { $('#iconPicker').show(); }).blur(function() { $('#iconPicker').hide(); });是一个隐藏（display：none）元素，用于选择图标。当用户专注于#iconPicker输入字段时将显示该信息，并在触发模糊事件时隐藏回来。如果我删除#contentIcon甚至处理程序部分中的$('#iconPicker').hide();，那么（我格式化此代码，感谢@Reddy）

blur

可以触发

并将值放在$(document).on('click', '#iconPicker table.dt-icons td', function () { $("#contentIcon").val($(this).data('value')); });输入字段中。但是，#contentIcon没有隐藏回来。如果我在#iconPicker事件处理程序中使用$('#iconPicker').hide();，则click如果用户不选择图标则不会隐藏。

更新

这里是示例jsfiddle.net

Answer 1

试试这个;但是，您的代码有点不清楚。

$("#contentIcon").keypress(function (e) {
    e.preventDefault();
});

$(document).on('click', '#iconPicker table.dt-icons td', function () {
    $('#contentIcon').empty();
    var _dtself = $(this);
    document.getElementById("contentIcon").value = _dtself.data('value');
});

$('#contentIcon').focus(function() {
    $('#contentIcon').show();
    console.log($('#iconPicker').val());            
}).blur(function() {
    $('#contentIcon').hide();
    console.log($('#iconPicker').val());
});

Answer 2

您可以将代码重构为单行，如下所示。然而，这与你现在拥有的相同。

$(document).on('click', '#iconPicker table.dt-icons td', function () {
  $("#contentIcon").val($(this).data('value'));
});

$(this).data('value')是正确的方法，但是如果由于某种原因这不适合您，那么您可以使用attr来获取任何属性值，如下所示

$(this).attr('data-value')

Answer 3

我通过实现@CMS' answer解决了这个问题。这里有一些修改代码。

PHP的

<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/>
<div id="iconPicker" class="iconpicker dropdown-menu">
    <div class="iconpicker-wrapper">
        <table class="dt-icons">
            <?php
            $a = 0;
            foreach (array_chunk($icons, 5, true) as $icon_cunk) {
                echo '<tr>';
                foreach($icon_cunk as $key => $ico) {
                    if ($a == 0) {
                        echo '<td><a class="action-placement choosed-icon" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>';
                    }else {
                        echo '<td><a class="action-placement" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>';
                    }
                    $a++;
                }
                echo '</tr>';
            }
            ?>
        </table>
    </div>
</div>

JavaScript的

$(document).on('keypress keydown', '#contentIcon', function (e) {
    e.preventDefault();
});

document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;

    if (element.id !== "contentIcon" && element.tagName !== "A" && element.className !== "action-placement" 
            && element.tagName !== "I" && element.className !== "icon-placement") {
        $('#iconPicker').hide();
    }
};

$(document).on('click', '#iconPicker table.dt-icons td a', function () {
    $(".choosed-icon").removeClass("choosed-icon");
    $(this).attr("class", "choosed-icon");

    $("#contentIcon").val($(this).data('value'));
});

$('#contentIcon').on('click', function () {
    $('#iconPicker').show();
    $('#iconPicker').focus();
});

这里是demo。

如何从javascript中的焦点模糊事件中获取元素值

3 个答案: