클릭 이벤트 내에서 클릭 이벤트를 만들려고하지만 원하는 결과를 얻지 못했습니다.

저는 jquery에 대해 아직 비교적 익숙하지 않으므로 최선을 다해 설명하려고 노력할 것입니다.클릭 이벤트 내에서 클릭 이벤트를 만들려고하지만 원하는 결과를 얻지 못했습니다.

저는 Cardfight라는 인기있는 카드 게임을 기반으로 코드를 만듭니다! 전위. 내 목표는 결국 편집 할 수있는 카드 덱을 만들고 저장하는 방법을 만드는 것입니다.

지금까지 코드에서 사용자의 입력을 텍스트 상자에서 가져 와서 버튼을 클릭하면 배열에 저장하고 jquery를 사용하여 div에 요소를 추가합니다.

div에 추가 된 요소를 클릭하면 (즉, 사용자가 입력 한 카드 이름이됩니다) 검색 기능이 호출되어 해당 카드에 대한 모든 정보와 통계를 반환합니다. 아래 코드와 주석을 포함시켜 각 부분의 기능을 명확하게 설명합니다.

MY CURRENT PROBLEM IS .... ID 출력의 div에서 아무 곳이나 클릭 할 때마다 ... 검색 기능이 계속 반복해서 호출됩니다.

원하는 기능 :

- 사용자는 - 사용자가 - 카드 이름 - 카드 정보를 표시 ID 출력 - 사용자가 카드의 이름을 클릭 와 DIV에 표시되는 '검색'클릭 카드 이름 입사 그 아래에 표시됩니다. 예 : 학년, 전원, 방패 등 - 사용자가 다른 카드의 이름을 입력하고, 무엇 현재 무슨 일이 일어나고

위의 단계를 반복 : - 사용자가 ID를 출력 사업부 아무 곳이나 클릭 할 수 있고, 카드 정보가 표시 계속됩니다 마치 검색 기능이 계속 호출되는 것처럼 계속해서 반복됩니다. 사용자가 카드 이름을 클릭 할 때 카드 정보가 한 번만 호출되기를 원합니다.

이상적으로 사용자가 카드 이름을 두 번째 클릭하면 목록에서 사라지지만,이 카드는 알아낼 수있을 것입니다.

내가 알고 싶은 또 다른 점은 ... 오히려 열린 질문입니다 ... 모든 사용자 입력을 좋은 생각으로 저장하고 있습니까? 장기적으로 볼 때 카드의 적절한 정보가 표시되면 체크리스트와 같은 종류의 것을 만들 수 있기를 원합니다. 사용자가 선택하면 ... 클릭하여 별도의 목록에 저장할 수 있습니다. 갑판을 계속 편집 할 수 있습니다. 여기

내 코드입니다 :

HTML :

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script type = "text/javascript" src='script.js'> 
    </script> 
    <title></title> 
</head> 
<body> 
<form name="searchForm"> 
    <input type="text" id="search" placeholder="Enter Card Name" name="searchItem"/> 
</form> 
<div id="button">Search!</div> 
<br/> 
<div id="output"></div> 
<div id="save"></div> 


</body> 
</html>

자바 스크립트/JQuery와 :

// Vanguard object to obtain statistics of each card. 
function Vanguard(name,grade,skill,power,shield,critical, type, nation, clan, race){ 
    this.name = name; 
    this.grade = grade; 
    this.skill = skill; 
    this.power = power; 
    this.shield = shield; 
    this.critical = critical; 
    this.type = type; 
    this.nation = nation; 
    this.clan = clan; 
    this.race = race; 
}; 

// This is where I can create and store new Vanguard objects easily 
// I've only included 5 here for testing but there are hundreds 
// that I will include once I get the code working. 
var database = {}; 
database['Asura Kaiser'] = new Vanguard("Asura Kaiser", 3, "Twin Drive!!", 11000, 0, 1, "Normal Unit", "Star Gate", "Nova Grappler", "Battleroid"); 
database['King of Knights, Alfred'] = new Vanguard("King of Knights, Alfred", 3, "Twin Drive!!", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Royal Paladin", "Human"); 
database['Dragonic Overlord'] = new Vanguard("Dragonic Overlord", 3, "Twin Drive!!", 11000, 0, 1, "Normal Unit", "Dragon Sanctuary", "Kagerou", "Dragon"); 
database['CEO Amaterasu'] = new Vanguard("CEO Amaterasu", 3, "Twin Drive", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Oracle Think Tank", "Human"); 
database['Alfred - Early'] = new Vanguard("Alfred - Early", 3, "Twin Drive!!", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Royal Paladin", "Human"); 

// This is code to display all the card information to the user 
// I am not sure why I need two parameters but 
// I couldn't get the code to work any other way. 
function printVanguard(p, name){ 
    document.getElementById('output').innerHTML +=("<hr />"); 
    for (var p in database[name]){ 
     document.getElementById('output').innerHTML +=(p +': ' + database[name][p] + '<br />'); 
     } 
     document.getElementById('output').innerHTML +=("<br />"); 
}; 

// This calls the printVanguard function for a specific card 
var search = function(p, name){ 
    printVanguard(p, name); 
}; 

// Jquery which is supposed to get the name of the card from the user. 
// When the user clicks a button, it will store the name in an array. 
// Then after it will append the input to a div for the user to see. 
// If the user clicks on the input appended to the div, 
// it will display all the statistics about that card. 
$(document).ready(function() { 
var userInput = []; 
$('#button').click(function(){ 
    userInput.push($('input[name=searchItem]').val()); 
    for (i = 0; i < userInput.length; i++){ 
     if (i === userInput.length - 1){ 
      $('#output').append("<br />" + userInput[i]); 
     } 
    } 
$('#output, userInput').unbind("click").click(function(){ 
for (i = 0; i < userInput.length; i++){ 
     if (i === userInput.length - 1){ 
      $('#save').append(search(userInput[i], userInput[i])); 
     } 
    } 
}); 
}); 
});

그리고 CSS 당신이 그것을 필요로하는 경우에 ... (아주 예쁜하지 아니지만 내 가장 높은 현재 우선 순위)

form { 
    display: inline-block; 
} 

#button{ 
    display: inline-block; 
    height: 20px; 
    width: 70px; 
    background-color:#FF8C00; 
    font-family:cursive, arial; 
    font-weight:bold; 
    color: #8B0000; 
    border-radius:5px; 
    text-align:center; 
    margin-top:2px; 
} 

.list { 
    font-family:garamond; 
    color:#006400; 
} 

#output { 
    font-family:garamond; 
    color:#006400; 
}

도움을 주셔서 감사합니다 ... 최대한 간결하게 코드를 작성하기 위해 최선을 다했습니다. 내가 개선 할 수 있다고 생각하는 방법이 있으면 알려 주시기 바랍니다! :)

출처

2013-01-31 Kamui

div 요소 내에서 카드 이름이 포함될 span 개의 요소를 만듭니다.div 요소 대신 처리기를 모든 span 요소에 연결하십시오.

당신이 div에있는 각 카드 이름 편집

, 당신은 이름과 특정 카드의 온 클릭 기능을 포함하는 별도의 span 요소가 있어야합니다. 모든 span 요소에 cardName이라는 클래스가 있다고 가정 해 보겠습니다. 따라서 코드는 다음과 같이되어야합니다.

$('span.cardName').on('click', function(e) { 
    var cardName = e.currentTarget.innerHTML; // Assuming you have nothing else within the span besides the card name 

    // Insert whatever code here 
}

출처

2013-01-31 16:40:01 kinsho

이렇게하면?

– Kamui

다음 내 jquery 코드에서 ...이 onclick에 userInput 변수를 추가해야합니다 ...? – Kamui

질문에 대한 답변을 보려면 편집을 참조하십시오 .... – kinsho

클릭 이벤트 내에서 클릭 이벤트를 만들려고하지만 원하는 결과를 얻지 못했습니다.

답변

관련 문제