Return the value of a variable captured from a click function

Question

Return the value of a variable captured from a click function

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have this html:

function() {
  var resultado;

  var a = $('div p').click(function(data) {

    var i = $(this).prev().prev().before($('span')).text();
    resultado = i;

  });

  return resultado;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <p class="subscription-header" style="font-size: 0.9em"><img src="/micuentamovil/appicon/219/46" /><a href="url">Text1</a><br /><span style="position: relative; top: -5px; font-size: 0.9em">Description</span>
  </p>
  <p class="banner"><img src="/url" />
  </p>
  <p class="link"><a href="url">Text2 >></a>
  </p>
  <p class="divider"></p>
  <p class="actionlink-double">
    <a href="url">option1</a>
    <a href="url">option2</a>
  </p>
</div>

I would like to return Text1 when I clicked on Text2. I'm trying this but it does not work:

Added

Forgive for the delay, indeed, what I'm looking for is when you click on Text2 > > return in a variable the text value of Text1, that is in this case Text1 .. Sorry not to have been clear. So far I get that in console.log or an alert the text appears but I can not return it in the return of the global function

javascript

asked by Luis 03.10.2017 в 15:20

source

2 answers

Result of a Rest Framework ListApiView passing parameter by url SQL query in WD_usermeta DB

score 0 · Answer 1

It only identifies the positions of the links, the link to act is inside the container .link and the link to extract the text within .subscription-header . Finally, it prevents the default action from being performed as soon as the link is clicked (redirection) stopping this action by means of preventDefault .

Example

var text = '';
$('.link a').on('click', function(e) {
  e.preventDefault(); // si no pones esto te redirige
  text = $('.subscription-header a').text();
  // ahora ya puedes usar text en otro lado
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <p class="subscription-header" style="font-size: 0.9em"><img src="/micuentamovil/appicon/219/46" /><a href="url">Text1</a><br /><span style="position: relative; top: -5px; font-size: 0.9em">Description</span>
  </p>
  <p class="banner"><img src="/url" />
  </p>
  <p class="link"><a href="url">Text2 >></a>
  </p>
  <p class="divider"></p>
  <p class="actionlink-double">
    <a href="url">option1</a>
    <a href="url">option2</a>
  </p>
</div>

score 0 · Answer 2

To select one you can use the selectors: odd,: even,: fisrt, here more examples everything will depend of what you want to achieve

function myFunction() {
     var text = $('.subscription-header a:first').text();
  return text;
}

$('.link a').on('click', function(e) {
 alert(myFunction());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <p class="subscription-header" style="font-size: 0.9em"><img src="/micuentamovil/appicon/219/46" /><a href="url">Text1</a><br /><span style="position: relative; top: -5px; font-size: 0.9em">Description</span>
  </p>
    <p class="subscription-header" style="font-size: 0.9em"><img src="/micuentamovil/appicon/219/46" /><a href="url">Text1</a><br /><span style="position: relative; top: -5px; font-size: 0.9em">Description</span>
  </p>
    <p class="subscription-header" style="font-size: 0.9em"><img src="/micuentamovil/appicon/219/46" /><a href="url">Text1</a><br /><span style="position: relative; top: -5px; font-size: 0.9em">Description</span>
  </p>
  <p class="banner"><img src="/url" />
  </p>
  <p class="link"><a href="#">Text2 >></a>
  </p>
  <p class="divider"></p>
  <p class="actionlink-double">
    <a href="url">option1</a>
    <a href="url">option2</a>
  </p>
</div>