>source

카드로 구성된 페이지가 있고 각 카드는 이미지와 제목으로 구성되어 있습니다. 일부 카드는 Javascript funciton을 호출하고 다른 카드는 그렇지 않지만 이것은 그렇게 중요하지 않습니다. 다음은 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./CSS/cards.css">
</head>
<body>
    <div class="logo">
        <a href="index.php"><img src="./STRUCTURE/IMAGES/logo.png" class="logo_image"></a>
    </div>
    <div class="cards">
        <div class="card" name="Drinks">
            <a href="this can be a link to another website" name="Drinks">
                <img src="./STRUCTURE/IMAGES/Drinks.jpg" class="card_image">
                <div class="animated-button">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <p>Drinks</p>
                </div>
            </a>
        </div>
        <div class="card" name="Coffe">
            <a onclick='thisIsJSfunction("this is an argument")' name="Coffe">
                <img src="./STRUCTURE/IMAGES/Coffe.jpg" class="card_image">
                <div class="animated-button">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <p>Coffe</p>
                </div>
            </a>
        </div>
    </div>
</body>
</html>

보시다시피 이미지와 제목은 <a> 다른 URL을 가리 키거나 자바 스크립트 함수를 호출 할 수있는 태그입니다. 그러나, 당신은 또한 알 수 있습니다 <a> 태그에는 name = "thisIsAname"속성이 있습니다. 내가하려고하는 것은 클라이언트가 카드를 클릭 할 때 다른 .php 파일에서 php 함수를 호출해야합니다. <a> 태그를 인수로 사용하고 (폼이 할 수 있다고 생각하지만 확실하지 않습니다) 다른 .php 파일의 PHP 함수는 원본 페이지에 div 내부의 일부 html 내용을 수정하는 일부 html 내용을 class="cards" .

자세한 내용이 필요한 경우 쉽게 게시물을 편집 할 수 있도록 최대한 명확하게 최선을 다했습니다. 미리 감사드립니다!

  • 답변 # 1

    js를 사용하여 "이름"을 얻을 수 있습니다. ajax를 사용하여 게시 요청을 보낼 수 있습니다. 예 :

    <body>
      <a href="#"  name="link1" onclick="thisIsJSfunction(this)">test1</a>
      <a href="#"  name="link2" onclick="thisIsJSfunction(this)">test2</a>
      <a href="#"  name="link3" onclick="thisIsJSfunction(this)">test3</a>
      <a href="#"  name="link4" onclick="thisIsJSfunction(this)">test4</a>
    <script>
    function thisIsJSfunction(e){
        console.log(e['name']);
        let name = e['name'];
    }
    // ajax
    $.ajax({
    type:"POST",
    url: "ajax-fetch-record.php",
    data: { name: name},
    dataType: 'json',
    success: function(res){
    $('#'+name).html(res.name);
    }
    });
    </script>
    </body>
    
    

  • 답변 # 2

    자바 스크립트를 사용하세요. get attribute "name"은 getAttribute를 사용하고이 값을 다른 PHP 스크립트에 게시합니다.

    처럼

    function clickLink(){
       const needAttr=this.getAttribute('name')
       ....
       this.preventDefault()
    }
    
    

  • 이전 python - viewspy에서 사용하기 위해 Django에 JavaScript 변수를 보내는 방법
  • 다음 동일한 클래스를 가진 요소를 평범한 Javascript로 나란히 감싸십시오