带图像轮播的jQuery执行点击图像。为什么?

时间:2014-07-16 20:18:36

标签: javascript jquery ajax html5 ajaxform

我正在尝试编写一个javascript,在用户点击图片后执行相同的步骤,获取您的ID,用户名和密码。之后,发送到我的脚本php将执行我的本地脚本。     但是我不知道什么是错的,但是即使点击一个img获取你的id,填写表单我的php脚本调用后端脚本同时点击图像。

有些人可以解释一下我需要做什么,我错了吗?

的Javascript

/*--------------------------------------------------*/
/*      BACKEND SCRIPT                              */
/*--------------------------------------------------*/
$('#loginform').hide();

$('#limpar').click(function hideOrder() {
    $('#resultado').hide();
});

$('img').click(function getIdImage(event) {
    id_image = (this.id);
    alert(id_image);
    // Form Login
    $('#loginform').show().submit(function formInfo() {
    login = $('#login').val();
    senha = $('#senha').val();   
    $("#status").show().html("<img src='images/ajax-loader.gif' alt='Consultando ...' />");
        $.post(
        'contact_form/validateUser.php',
            { target:id_image, username: login, password: senha }, 
                function getDataBack(data) {
                    if (data.error) {
                        $('#retorno').html(data.error);
                        $('#status').hide();
                    } else {
                    $('#retorno').html(data);
                    $('#imagem').attr('src', '/Onepage/screenshots/' + login + '.png');
                    $('#resultado').show();
                    $('#status').hide(); }
            }, 'json');
        return false;
        login = $('#login').val("");
        senha = $('#senha').val("");
        id_image = val("");
    });
});

PHP:

<?php 
// Informations passes from form
$username = $_POST['username'];
$password = $_POST['password'];
$target = $_POST['target'];
$retorno = array();

// Execute
$run = "/usr/local/run/parser";
$script = "/var/run/back/$target";

// Check if POST is not null
if ( ($username == "") && ($password == "") ) {
    $retorno['error'] = "Os campos email e senha são obrigatórios.";
    echo json_encode($retorno);
    return false;
}
// Execute to via asynchronous process
try {
    exec("{$run} {$script} {$username} {$password} 2>&1", $output);
} catch (Exception $e) {
    $retorno['error'] = "Não foi possivel acessar target!";
}
// Return Data if success
$retorno['success'] = $output;
echo json_encode($retorno);
?>

HTML:

<div class="col-lg-10">
    <div id="status" style="display: none;"></div>
    <div id="resultado" data-animated="fadeInUp" class="col-lg-12 col-sm-offset-2">
        <div id="retorno"></div>
        <img id="imagem" />
    </div>
</div>`enter code here`

1 个答案:

答案 0 :(得分:0)

您应该为这些特定的图像指定一个类名,这样其他图像都不会错误触发该事件。 其次,您可以在jQuery上使用OR

$( ".imgclass" ).on( "click", function( event ) {
  alert( "This will be displayed only once." );
  $( this ).off( event );
  // The event will be removed for the specific image
});

否则,如果您只希望使用.one一次触发请求,那么

$( ".imgclass" ).one( "click", function() {
  alert( "This will be displayed only once." );
  // No images will be able to trigger the event
});

来源:https://api.jquery.com/one/