как получить доступ к значению переменной, которая существует внутри обработчика кликов, и сохранить вне него в переменной - PullRequest
Новая
       14

как получить доступ к значению переменной, которая существует внутри обработчика кликов, и сохранить вне него в переменной

0 голосов
/ 12 апреля 2020

Вопрос может показаться сложным, потому что я новичок в JS программировании. Сначала позвольте мне показать вам код, 

<ul id="myid4" class="c_select_ul">
  <li>
   <div class="option op_cl">
     <div class="color"></div>
       <p>White</p>
     </div>
  </li>
  <li>
   <div class="option op_cl">
    <div class="color black"></div>
     <p>Black</p>
   </div>
  </li>                                  
</ul>

и JS код 

        $("ul[id*=myid4] li").click(function () {
          var color = $(this).text();
          color = color.replace(/^\s+|\s+$/g, "");
            console.log(color);
        });

Итак, я хочу получить доступ к значению переменной "color" вне обработчика кликов и сохранить в другой переменной. Это может быть зарегистрировано внутри него, как я показал в коде. Я хочу использовать его в других функциях, также как отправить с ajax вызовом. Я могу сделать ajax вызов внутри него, но у меня есть три других выбора, которые можно сделать таким же образом и отправить четыре значения через ajax вызов и получение результата.

заранее спасибо.

Ответы [ 4 ]

0 голосов
/ 12 апреля 2020

Я предполагаю, что вы используете Jquery. Вы также можете сделать что-то вроде этого. 

window.color = ""; //notice the window.
   $(function(){
       ....
   })
   function myfunction(){
     $("ul[id*=myid4] li").click(function () {
      var color = $(this).text();
      color = color.replace(/^\s+|\s+$/g, "");
        console.log(color);
    });
   }
0 голосов
/ 12 апреля 2020

Вы можете сохранить его в глобальной переменной и использовать в других функциях следующим образом: 

let globalColor;
$("ul[id*=myid4] li").click(function () {
          var color = $(this).text();
          color = color.replace(/^\s+|\s+$/g, "");
          globalColor = color;
          func();
});
function func(){
          console.log(globalColor);
          $.ajax('/api/submitData', {
               type: 'POST',
               data: { color: globalColor },
               success: function (data, status, xhr) {
                    console.log(data);
               },
          });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myid4" class="c_select_ul">
     <li>
          <div class="option op_cl">
               <div class="color"></div>
               <p>White</p>
          </div>
     </li>
     <li>
          <div class="option op_cl">
               <div class="color black"></div>
               <p>Black</p>
          </div>
     </li>                                  
</ul>
0 голосов
/ 12 апреля 2020

Если вы хотите позвонить AJAX после того, как все 4 выбора сделаны, используйте селектор класса вместо идентификатора: 

var state = {};

var handleSelect = function (index, selected) {
  state[index] = selected;

  if (Object.keys(state).length === 4) {
    console.log('All 4 selection are made', state);
    // Call ajax
  }
};

$(".c_select_ul li").click(function () {
  var color = $(this).text();
  color = color.replace(/^\s+|\s+$/g, "");
  console.log(color);

  var index = $(this).closest("ul").index("ul");
  handleSelect(index, color);
});
0 голосов
/ 12 апреля 2020

Этот вопрос касается области видимости переменной Global vs local. Вы объявили переменную внутри обратного вызова события click, поэтому она умирает после завершения выполнения. Чтобы решить эту проблему, вам нужно объявить переменную глобально. Вы можете объявить это вне обработчика обратного вызова. 

<html>
    <head>
        <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
    </head>
    <body>
        <ul id="myid4" class="c_select_ul">
            <li>
             <div class="option op_cl">
               <div class="color"></div>
                 <p>White</p>
               </div>
            </li>
            <li>
             <div class="option op_cl">
              <div class="color black"></div>
               <p>Black</p>
             </div>
            </li>                                  
          </ul>

          <button type="button" onclick="submit()">submit</button>
          <script>
                var color;
                $("ul[id*=myid4] li").click(function () {
                  color = $(this).text();
                  color = color.replace(/^\s+|\s+$/g, "");
                    console.log(color);
                });
                function submit() {
                    console.log('printing from other function-->', color);
                }
                </script>
    </body>
</html>

Теперь вы можете обращаться к переменной везде внутри файла JS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...