Question

我有一个href链接，显示错误：

'You are not verified yet, Please enter the verification code. <strong><a href="#" class="sms-code-field">Click here</a> to enter verification code</strong>'

另外，当点击“点击这里”时，我会调用这个JavaScript：

<script type="text/javascript">
    (function($){
        var inserted = false;
        $('#login_error').on('click', '.sms-code-field', function(e){
            e.preventDefault();

            if(!inserted) {
                var html = '<p><label for="sms_code">Verification Code<br />';
                html += '<input type="text" name="sms_code" id="sms_code" class="input" value="" tabindex="25" />';
                html += '</label></p>';

                $('p.forgetmenot').before(html);
                inserted = true;
            }
        });
    })(jQuery);
</script>

我想更改脚本以在点击时显示此div：

<div class="sms-code-field" style="display: none;">
  <label  for="inputSMSCODE"><?php echo $CORE->_e(array('login','10')); ?></label>
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
       <input type="text" name="sms_code" id="sms_code" class="input" > 
    </div>              
</div>

请注意我要显示的div是从另一页填充的但错误和div出现在同一页面上。删除style =“display：none;使用浏览器调试器显示div。

Answer 1

只需在onclick函数中设置$('.sms-code-field').show()

即可

Answer 2

只需在onclick标记中添加a属性，然后输入JS必需项以在属性引号中显示div。这应该只是简单地解决问题。

Answer 3

这应该可以解决问题，只需添加$('.sms-code-field').show();

即可

注意如果您有多个.sms-code-field元素且想要显示特定元素，我们需要查看更多html

另请注意您没有向我们展示id="login_error"的元素，因此我在下面添加了自己的元素，因为您的代码需要工作。如果这不能解决您的问题，请向我们展示html

＆＃13;

(function($) {
    var inserted = false;
    $('#login_error').on('click', '.sms-code-field', function(e) {
        e.preventDefault();
        $('.sms-code-field').show(); // added this line
        if (!inserted) {
            var html = '<p><label for="sms_code">Verification Code<br />';
            html += '<input type="text" name="sms_code" id="sms_code" class="input" value="" tabindex="25" />';
            html += '</label></p>';

            $('p.forgetmenot').before(html);
            inserted = true;
        }
    });
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="login_error"> 'You are not verified yet, Please enter the verification code. <strong><a href="#" class="sms-code-field">Click here</a> to enter verification code</strong>'
  <div class="sms-code-field" style="display: none;">
    <label  for="inputSMSCODE">php output here</label>
    <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input type="text" name="sms_code" id="sms_code" class="input" >
    </div>
  </div>
</div>

＆＃13;

Answer 4

$(document).ready(function(){
  $('a.sms-code-field').click(function(e){
    e.preventDefault();
    $('.sms-code-field').css('display','block');    
  });
});

结帐本次演示：http://jsbin.com/tokusaqofa/1/

在href点击显示div

4 个答案: