AutoClick somente em class dentro de class

dmelo · Maio 12, 2018

Gostaria de realizar um autoclick sequenciado em apenas um link por por vez e somente na class="mobile" que tiver uma class="check-handler". Agradeço a quem me ajudar pois já tentei vários scripts mas até agora nada.

(A)<div class="clicked mobile" id="container">
   <div class="check-handler" data-id="000" data-url="http://www.xxx.com">    

(B)<div class="mobile" id="container">                                   
   <div class="check-handler" data-id="111" data-url="http://www.mmm.com">

(C)<div class="mobile" id="container">                                   
   <div class="check-handler" data-id="222" data-url="http://www.uuu.com">

if ($('.mobile #container .check-handler').is(':visible')) 
    setTimeout(function(){$('.mobile #container .check-handler').click();},5000);

dmelo · Maio 15, 2018

@Maujor e @Omar~

Quando estava preste a desistir, devido a minha incapacidade de ser claro nas palavras e muito triste por ter ocupado vocês em me ajudar sem ter alcançado o meu objetivo, resolvi tentar entender o código de vocês que não funcionava do jeito que eu desejei, foi que consegui finalmente!

Muito, muito obrigado pela ajuda que depois de muito trabalho vocês me deram. Deixo abaixo o código que resolve 100% o problema proposto pelo título desse tópico.

$(document).ready(function() {
setTimeout(function () {
$('#ad-container:not(._clicked.m-portlet.m-portlet--mobile) .m-portlet__head.bot-check-handler').click();
}, 3000);
});

OBS: Espero contar com vocês no futuro próximo pois tenho várias dúvidas que em breve irei postar aqui no site.

Parabéns pelo conhecimento admirável que vocês possuem!

Maujor · Maio 12, 2018

Explique o que você está tentando fazer.
1-) No seu seu código HTML tem 3 valores iguais para ID (em HTML não é permitido repetir um valor de ID na página)

2-) Nenhum dos três containeres está com tag de fechamento.
3-) O código JS indica que você está usando jQuery. Qual a versão?

4-) O auto click fará o que? Vai para o URL em data-url?

5-) O método setTimeout checa de 5s em 5s se há uma das 3 opções visíveis e se sim executa o auto click?

É preciso que você esclareça o escopo da sua dúvida, caso contrário não há como ajudar.

NOTA: Não precisa "citar" meu post para responder, basta começar sua resposta com @Maujor

dmelo · Maio 13, 2018

@Maujor

Depois de anos fazendo perguntas na internet essa é a primeira vez que encontro uma pessoa parecida comigo, ou seja, metódica.

Estou muito feliz pela sua resposta rápida e suas dúvidas, então vamos lá:

1-) No seu seu código HTML tem 3 valores iguais para ID (em HTML não é permitido repetir um valor de ID na página)

R= Vou colocar o código original abaixo.

2-) Nenhum dos três containeres está com tag de fechamento.

R= Vou colocar o código original abaixo.

3-) O código JS indica que você está usando jQuery. Qual a versão?

R= Isso eu não sei.

4-) O auto click fará o que? Vai para o URL em data-url?

R= Sim, vai para o URL em data-url em uma nova aba.

5-) O método setTimeout checa de 5s em 5s se há uma das 3 opções visíveis e se sim executa o auto click?

R= Ele checa de 5s em 5s se há uma opção correta das opções visíveis e se sim executa o auto click em apenas uma de cada vez.

Código Original "A"

<h3 class="m-portlet__head-text">3rd Referral Contest</h3>

</div></div></div>
<div class="m-portlet__body">Win the first prize of 0.20 </div>
<div class="m-portlet__foot">

Código Original "B"

<h3 class="m-portlet__head-text">3rd Referral Contest</h3>

</div></div></div>
<div class="m-portlet__body">Win the first prize of 0.20 </div>
<div class="m-portlet__foot">

OBS: Na página existe vários blocos mas eu preciso de um autoclick somente no bloco igual a opção "B".

Maujor · Maio 13, 2018

@dmelo
Lamentavelmente é impossível reproduzir seu layout localmente para analisar, pois o trecho de código

que você postou não faz sentido.
Você está usando Bootstrap e esse frramework tem uma estrutura de rows e cols que está incompleta no

código enviado.
Começa com col-md-3 sem row, segue com row e col-6 que não existe em Bootstrap e por aí vai.
Você está tentando adaptar algo pronto?
O ideal seria ter a página online uma vez que não dá para reproduzir localmente.

5 horas atrás, dmelo disse:

OBS: Na página existe vários blocos mas eu preciso de um autoclick somente no bloco igual a opção "B".

Afinal o autoclick será no bloco vísivel ou somente no bloco igual a opção "B".

dmelo · Maio 13, 2018

@Maujor

Sim, estou tentando criar um autoclick em um site que está pronto.

O autoclick será no bloco visível igual a opção "B".

Meu pensamento é: Seria possível criar um código que funcionasse o autoclick somente se a class=x estivesse abaixo da class=y?

Maujor · Maio 13, 2018

1 hora atrás, dmelo disse:

Meu pensamento é: Seria possível criar um código que funcionasse o autoclick somente se a class=x estivesse abaixo da class=y?

Então vamos lá.
O que significa "class=x abaixo da class=y". Seria elemento com a classe=x logo após o elemento com a class=y na HTML?
Na opção "B", qual seria a classe x e a classe y?

dmelo · Maio 13, 2018

@Maujor

Ok, direto ao ponto:

Autoclick na

class="m-portlet__head bot-check-handler"

que está abaixo da

class="m-portlet m-portlet--mobile" id="ad-container">

Maujor · Maio 13, 2018

Tente assim:
Coloque esse código antes da tag de fechamento de BODY

<script>
if ($('#ad-container').is(':visible')) 
    setTimeout(function() {
      var destino = $('#ad-container .bot-check-handler').attr('data-url');
      window.location.href = destino;		
		},5000);
</script>
</body>

Omar~ · Maio 14, 2018

Primeiro e é minha opinião: Redirecionar ou forçar um visitante do website a ser redirecionado para um pagina sem o consentimento dele é completamente grotesco.

Como o Maujor já mencionou que não deu para "sacar" o que de fato quer fazer, nem o que apresentou como HTML dar a se ter uma ideia do que fazer, também fiquei perdido como responder a isso.

Agora, você diz que tem que ser um redirecionamento de cada vez. Pois bem, mas se você está a redirecionar então está a não utilizar mais os scripts da página anterior, por isso não dar para redirecionar com um suposto link 1 e depois de um certo tempo o link 2 por exemplo. Pelo menos não só com jQuery, seria necessário utilizar e capturar valores como GET, SESSION COOKIE etc...

Outro fato é que fiquei curioso do porque utilizar um elemento div para pegar um valor de url? Pois esse valor poderia já ser definido dentro do script, assim sendo não é necessário acessar o html para obter esses dados.

De qualquer forma pelo que entendi fiz assim:

Fazendo uma busca pelo elemento div.mobile se ele existir e dentro desse elemento deve existir também um elemento div.check-handler, assim sendo capturo o o valor de data-url de check-handler, logo então o script aguarda 3 segundos e redireciona para o valor obtido.

Veja o exemplo:

Spoiler


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
        <title>Exemplo</title>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.mobile').each(function () {
                    if ($(this).find('.check-handler')) {
                        var redirecionar = $(this).children('.check-handler').attr('data-url');

                        setTimeout(function () {
                            window.location.href = redirecionar;
                        }, 3000);

                    }
                });
            });

        </script>
    </head>
    <body>

        <div class="clicked mobile">
            <div class="check-handler" data-id="000" data-url="http://www.xxx.com"></div>
        </div>

        <div class="mobile">                                   
            <div class="check-handler" data-id="111" data-url="http://www.mmm.com"></div>
        </div>

        <!-- Ter isso aqui já está errado pois haverá conflito porque os valores dos elementos são idênticos
        <div class="mobile">                                   
            <div class="check-handler" data-id="222" data-url="http://www.uuu.com"></div>
        </div>
        -->

    </body>
</html>

Não sei se ficou bom porque meu negócio é javascript puro. Mas enfim....

Note que a forma de busca é baseada em elemento class, o que não é muito interessante, pois assim como no exemplo que mostrei a repetição dos mesmos elementos "class", que talvez possa causar uma anomalia no comportamento do script. O ideal é (Se o elemento possui a url de redirecionamento esse deveria ser um elemento id#ID) o mesmo como sendo único não se repetindo.

dmelo · Maio 14, 2018

@Maujor

Muito obrigado mas o seu código é parecido com o meu, ou seja, o problema continua.

Vou tentar mais uma vez explicar porém com outras palavras.

Na página tem vários links, quando clico no primeiro é aberto esse link em uma nova aba, e o link que já cliquei continua disponível mas com a "class" mudada. Então desejo que todos os links que ainda não foram clicados, sejam clicados em um intervalo aleatório de tempo, assim sendo rejeitando os links que já foram clicados.

dmelo · Maio 14, 2018

@Omar~

Muito obrigado pela sua resposta. Teria como você alterar seu código para que ao inves de pegar a url e abrir na mesma janela, ele simplesmente clicar na url?

OBS: O que eu desejo é o seguinte: Na página tem vários links, quando clico no primeiro é aberto esse link em uma nova aba, e o link que já cliquei continua disponível mas com a "class" mudada. Então desejo que todos os links que ainda não foram clicados, sejam clicados em um intervalo aleatório de tempo, assim sendo rejeitando os links que já foram clicados.

Maujor · Maio 14, 2018

@dmelo

A maior dificuldade é entender o que você pretende, pois as informações são contraditórias e confusas,

contudo no seu último post vocês descreveu o que quer. Antes de eu codificar aqui a solução esclareça

se está correto o seguinte:
O clique em um link qualquer da página abre o link em nova aba do navegador e automaticamente as
demais URL são abertas em novas abas. Permanecendo aberta a aba com a página inicial com os links
disponíveis e com a classe mudada e as abas com os demais links.

Por que você quer que "sejam clicados em um intervalo aleatório de tempo". Pode ser imediatamente um após o outro?

dmelo · Maio 14, 2018

@Maujor

Puxa! Você está quase lá...

1) O clique não é em um link qualquer da página e sim no link com uma class específica. Embora a página tenha vários links com a mesma class, quando ainda não são clicados.

2) Sim, pode ser um após o outro.

3) Seria possível o seu código ao invés de pegar a URL ele simplesmente clicar nela? Penso que seria mais fácil.

Maujor · Maio 14, 2018

29 minutos atrás, dmelo disse:

3) Seria possível o seu código ao invés de pegar a URL ele simplesmente clicar nela? Penso que seria mais fácil.

Para simplesmente clicar nela é preciso que haja um link na página apontando para o URL, mas no seu código HTML o URL é o valor do atributo data-url. Coloque o link no código que aí sim fica mais fácil

Maujor · Maio 15, 2018

@dmelo

Desenvolvi uma página, com cinco links e com o efeito que você quer criar.
HTML:

<div class="mobile">
  <div class="check-handler" data-url="http://www.maujor.com">Maujor</div>
</div>

<div class="mobile">
  <div class="check-handler" data-url="http://www.livrosdomaujor.com.br">Livros do Maujor</div>
</div>

<div class="mobile">
  <div class="check-handler" data-url="http://www.google.com">Google</div>
</div>

<div class="mobile">
  <div class="check-handler" data-url="http://www.w3.org">W3C</div>
</div>

<div class="mobile">
  <div class="check-handler" data-url="http://uol.com.br">UOL</div>
</div>

jQuery:

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  
<script>
var $urlArray = []; // array com as URL a abrir automaticamente
$('.mobile').on('click', function() { 
  $(this).addClass('clicked'); // adiciona a classe 'clicked' no URL clicado
  urlClicada = $(this).find('.check-handler').attr('data-url');  // armazena o URL clicado 
$('.mobile:not(.clicked) .check-handler').each(function(i, el) {  // loop pelos URL não clicados
  $urlArray.push(  $(this).attr('data-url') ); // array com URL's não clicadas a abrir automaticamente
  window.open($urlArray[i], '_blank'); // abre os URL não clicados, em abas	   
});
  window.open(urlClicada, '_blank');  // abre o URL clicado, em aba		   
  $('.mobile:not(.clicked)').addClass('clicked');  // adiciona a classe 'clicked' nos URL não clicados
});
</script>  
</body>

A página está online em http://clickmaujor.com/foruns/abas.html

ATENÇÃO: Abrir abas no navegador do usuário om uso de programação não é uma boa prática. Os navegadores bloqueiam
janelas popup e é necessário que o usuário autorize a abertura. Na página que criei o Chrome e o Internet Explore não abrem as abas para os links não clicados. O Firefox abre.

Omar~ · Maio 15, 2018

Ta aqui. De acordo com o que disse por último.

Como disse meu negócio é javascript, então não usei jquery.

O Maujor já disse sobre a abertura de novas janelas sem o consentimento do usuário.

Além disso ao fazer o teste aqui meu software anti-virus (Kaspersky) bloqueou a execução de script da página de teste, pois como dito forçar um usuário a ser redirecionado a um local sem o consentimento/conhecimento dele não só é uma má prática como também fere as normas de segurança da web

Spoiler


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemplo</title>
        <script>
            
            /**
             * Classe javascript para executar
             */
            
            var ObjJS = function () {

                // Pego todos os elementos que tenham a class.botao
                var $btns = document.getElementsByClassName('botao');

                // Pego a quantidade de elementos botão
                var $quant = $btns.length;

                // Variável usada para executar o loop
                var $i;

                // Contagem dos elementos
                var $j = 0;

                // Quando carregado a página já iniciar a função
                // de contagem de tempo
                autoOpen();
                
                
                /** 
                 * Essa parte refere-se a quando um usuário vem a clicar nos links
                 */

                // Pecorro todos os elementos botao já capturados e adiciono evento click neles
                for ($i = 0; $i < $quant; $i++) {
                    $btns[$i].addEventListener('click', function (event) {
                        // Remove o comportamento padrão do link.
                        // Isso fará com que o navegador só execute a função
                        // ao invés de abrir o link
                        // Se remover isso o comportamento do navegador volta ao normal
                        event.preventDefault();

                        // Executo função enviando o botão clicado
                        openLink(event.target);

                        return false;
                    });
                }

                /**
                 * Essa função é que manipula os elementos e abre
                 * os links em nova janela.
                 * Se os por acaso algum botão já foi ativado ele é ignorado
                 */
                function openLink(evt) {
                    // Chamo a função que conta o tempo
                    // somente se todos os links ainda não foram acionados
                    if ($j !== $quant) {
                        autoOpen();
                        $j++;
                    }

                    // Fazer uma segunda checagem pela class do elemento
                    // Se o mesmo já foi clicado não executar novamente
                    if (evt.className !== 'botao desativado') {

                        // Abro em nova janela a url
                        window.open(evt.href, '_blank');


                        // Altero a propiedade class para ".botao .desativado"
                        // fazendo com que o botão não seja ativo novamente
                        evt.className += ' desativado';
                    }

                    return false;
                }

                /**
                 * Essa função faz a contagem o tempo para abrir os links
                 * enviando os botões para a outra função
                 */
                function autoOpen() {
                    setTimeout(function () {
                        openLink($btns[$j]);
                    }, 2000);
                }

            };
        </script>
    </head>
    <body>
        <a href="https://www.google.com/"class="botao" title="exemplo 1">Link 1</a>
        <a href="https://forum.imasters.com.br/"class="botao" title="exemplo 2">Link 2</a>
        <a href="https://forum.imasters.com.br/forum/6-javascript/"class="botao" title="exemplo 3">Link 3</a>
        <a href="https://forum.imasters.com.br/topic/565974-autoclick-somente-em-class-dentro-de-class/"class="botao" title="exemplo 4">Link 4</a>

        <script>
            var link = new ObjJS(); // Instancia a classe Javascript
        </script>


    </body>
</html>

Maujor · Maio 15, 2018

2 horas atrás, Omar~ disse:

Como disse meu negócio é javascript, então não usei jquery.

Nesse caso usar jQuery é indicado porque o template HTML é com o framework Bootstrap e consequentemente a biblioteca jQuery já está na página.

Arquivado

AutoClick somente em class dentro de class

Pergunta

dmelo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

17 respostas a esta questão

Recommended Posts

dmelo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

dmelo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

dmelo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

dmelo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

dmelo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

dmelo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

dmelo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados